javascript - 可点击的按钮和改变 div 的内容
问题描述
我有两个部分的 div：左边一个 - 菜单列表，右边一个 - 图片库
菜单列表中的每个按钮内部都有不同的内容。当您单击其中一个按钮时，右侧的内容会发生变化。当您再次单击同一按钮时，内容会更改并返回到图库。
问题是当我点击一个项目时，我无法点击另一个。我需要单击相同的按钮返回图片库，然后我可以单击另一个。
我希望这是有道理的。
HTML
<div grid-col="12" class="work">
<div grid-col="6" class="work-sub project-sub" style="border-left: none; border-right: none;">
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3 style="border-top: 0px;">Project Name</h3>
</div>
<div grid-col="4" class="work-list project-list">
<h3 style="border-top: 0px;">Year</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-graphics">Graphics</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-top: 0px;">
<h3>2020</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-chinese">Chinese</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-top: 0px;">
<h3>2020</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-experimental">Experimental</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-top: 0px;">
<h3>2020</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-feed">Feed</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-top: 0px;">
<h3>2019</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-rapidly">Rapidly</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-top: 0px;">
<h3>2018</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-closer">Closer</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list">
<h3>2018</h3>
</div>
<div grid-col="8" class="work-list project-list" style="border-right: 1px solid #000;">
<h3>
<a href="#" id="btn-market">Market</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" ;>
<h3>2018</h3>
</div>
<div
grid-col="8"
class="work-list project-list"
style="border-right: 1px solid #000; border-bottom: 1px solid #000;"
>
<h3>
<a href="#" id="btn-italia">Italia</a>
</h3>
</div>
<div grid-col="4" class="work-list project-list" style="border-bottom: 1px solid #000;">
<h3>2017</h3>
</div>
</div>
<div grid-col="6" class="work-sub" style="border-right: none; border-top: none;">
<div grid-col="4" class="project-photos project-sub">
<div grid-col="6" class="project-photo easy-quick">
<div id="1">
<div class="button-container square">
<span class="mas">Graphics</span>
<button type="button" name="Hover">
<img src="Graphics.jpg" />
</button>
</div>
<div class="button-container">
<span class="mas">Chinese</span>
<button type="button" name="Hover">
<img src="Chinese.jpg" />
</button>
</div>
<div class="button-container vertical">
<span class="mas">Experimental</span>
<button type="button" name="Hover">
<img src="Experimental.jpg" />
</button>
</div>
<div class="button-container square">
<span class="mas">Feed</span>
<button type="button" name="Hover">
<img src="Feed.jpg" />
</button>
</div>
<div class="button-container">
<span class="mas">Rapidly</span>
<button type="button" name="Hover">
<img src="Rapidly.jpg" />
</button>
</div>
<div class="button-container">
<span class="mas">Closer</span>
<button type="button" name="Hover">
<img src="Closer.jpg" />
</button>
</div>
<div class="button-container">
<span class="mas">Market</span>
<button type="button" name="Hover">
<img src="Market.jpg" />
</button>
</div>
<div class="button-container vertical">
<span class="mas">Italia</span>
<button type="button" name="Hover">
<img src="feed-italia.jpg" />
</button>
</div>
</div>
<div id="2" style="display:none;">
<img src="" />
</div>
<div id="3" style="display:none;">
<img src="" />
</div>
<div id="4" style="display:none;">
<img src="" />
</div>
<div id="5" style="display:none;">
<img src="" />
</div>
<div id="6" style="display:none;">
<img src="" />
</div>
<div id="7" style="display:none;">
<img src="" />
</div>
<div id="8" style="display:none;">
<img src="" />
</div>
<div id="9" style="display:none;">
<img src="" />
</div>
</div>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="click.js"></script>
CSS
body {
font-family: Helvetica;
font-size: 22px;
line-height: 1.2;
text-transform: uppercase;
height: 100vh;
position: fixed;
background-color: #ffffff;
color: #000;
}
h1, h2, h3 {
padding: 4px 15px 4px 15px;
}
h3 {
font-size: 17px;
}
h4 {
font-size: 14px;
padding: 5px;
}
p {
padding: 5px;
text-transform: none;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: #666666;
}
.menu, .work {
width: 100%;
}
.menu h2 {
width: 33.33333%;
float: left;
border: 1px solid #000;
}
[grid-col] {
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[grid-col="12"] {
width: 100%;
}
[grid-col="8"] {
width: 66.66667%;
}
[grid-col="6"] {
width: 50%;
}
[grid-col="4"] {
width: 33.33333%;
}
[grid-col="2"] {
width: 16.66667%;
}
#menu-info-sub {
float: right;
}
.menu-info-sub {
float: right;
display: block;
z-index: 100;
display: none;
transition: transform 0.8s linear;
}
.menu-info-sub h2 {
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
.menu-info-sub h2:last-child {
border-right: none;
}
h2.text {
text-transform: none;
}
.work {
width: 100%;
float: left;
display: block;
}
.work h2 {
border-top: 0px;
}
.work-list h3 {
border-left: none;
border-top: none;
}
.work-photo h2 {
border-top: none;
}
.work-sub {
float: left;
display: block;
border-bottom: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.work-list {
float: left;
display: block;
}
.project-list h3 {
border-top: 1px solid #000;
}
.project-list:first-child {
border-top: 0px;
}
.project-list:last-child {
border-bottom: 1px solid #000;
}
.work-photo {
width: 100%;
border-bottom: 0px;
}
.project-photos {
width: 100%;
border-bottom: 0px;
display: inline-block;
padding-bottom: 70px;
}
.project-photo {
width: 100%;
}
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent; /* make scrollbar transparent */
}
.project-photo img {
width: 100%;
}
.project-sub {
flex: 5;
height: 100vh;
overflow: scroll;
border-bottom: 0px;
}
JavaScript
$('#btn-graphics').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#2')
.show()
.siblings('div')
.hide()
} else if ($('#2').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-chinese').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#3')
.show()
.siblings('div')
.hide()
} else if ($('#3').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-experimental').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#4')
.show()
.siblings('div')
.hide()
} else if ($('#4').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-feed').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#5')
.show()
.siblings('div')
.hide()
} else if ($('#5').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-rapidly').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#6')
.show()
.siblings('div')
.hide()
} else if ($('#6').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-closer').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#7')
.show()
.siblings('div')
.hide()
} else if ($('#7').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-market').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#8')
.show()
.siblings('div')
.hide()
} else if ($('#8').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
$('#btn-italia').on('click', function() {
if ($('#1').css('display') != 'none') {
$('#9')
.show()
.siblings('div')
.hide()
} else if ($('#9').css('display') != 'none') {
$('#1')
.show()
.siblings('div')
.hide()
}
})
解决方案
你可以大大简化你的jquery。
给你的每个按钮一个类，例如.button-toggle，而不是id，给它们一个带有想要打开的数字的属性。
然后你在函数中监听$('.button-toggle').on('click', function() { ... )
你可以从“this”的属性中获取数字，然后为了进一步简化内容，只需在隐藏元素上切换类“d-none”（显然你应该使用 d-隐藏 div首先没有）。
jquery 可能看起来像这样
$('.button-toggle').on('click', function() {
var firstToggle = $(this).data('toggle-one');
var secondToggle = $(this).data('toggle-two');
$('#'+firstToggle).toggleClass('d-none');
$('#'+secondToggle).toggleClass('d-none');
})
按钮可能看起来像这样
<a class="button-toggle" data-toggle-two="3" data-toggle-one="4" href="#" id="btn-graphics">Graphics</a>
忘了说 d-none 是一个标准的引导类，当你不使用引导时，你自己定义它
.d-none {
display: none;
}
希望我能帮上忙
推荐阅读
- c++ - 尽管路径和权限正确，但出现多个错误 C1083
- laravel - laravel 作为 docker-compose 服务 - [QueryException] 找不到驱动程序
- javascript - vuelidate 所需功能 - Vye.js
- javascript - 使用 jquery 的 JavaScript 动画隐藏元素
- c# - WPF ComboBox 不更新 propertychanged 事件
- docker - 如何使用 PM2 在 docker 内运行 prpl-server？
- html - AngularJS ng-if 不适用于所有模块？
- python - 对一列求和以获得最大数，受另一列中的约束
- parallel-processing - 并行 groovy 脚本（通过 Scriptrunner 在 Jira 中）
- python - Python 中的代理是什么意思？