可点击的按钮和更改 div 的内容

Question

我有两部分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()
}
})

Answer 1

您可以大大简化jquery。

给每个按钮一个类，例如.button toggle，而不是id，给它们一个带有要打开的数字的属性。

然后收听$('.button-toggle').on('click', function() { ... )在函数中，您可以从"上的属性中获取数字；这个"；然后为了进一步简化内容，只需切换类"；d-none"；在隐藏元素上(很明显，您应该首先使用d-none隐藏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;
} 

希望我能帮助