<分区>
标签 javascript jquery html css
<分区>
我正在寻找一种显示一个 div 并隐藏所有其他 div 的方法。默认显示第一个。
我能够使用 jQuery 实现这一点，但代码非常冗长，我觉得有更好/更优化的方法来解决这个问题。
这是片段:
$(".link-one").click(function() {
$(".div-one").show();
$(".div-two,.div-three,.div-four,.div-five").hide();
});
$(".link-two").click(function() {
$(".div-two").show();
$(".div-one,.div-three,.div-four,.div-five").hide();
});
$(".link-three").click(function() {
$(".div-three").show();
$(".div-one,.div-two,.div-four,.div-five").hide();
});
$(".link-four").click(function() {
$(".div-four").show();
$(".div-one,.div-two,.div-three,.div-five").hide();
});
$(".link-five").click(function() {
$(".div-five").show();
$(".div-one,.dive-two,.div-three,.div-four").hide();
});.div-two,
.div-three,
.div-four,
.div-five {
display: none
}
a {
display: inline-block;
margin-right: 10px;
padding: 5px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>
<div class="div-one">
Div #1
</div>
<div class="div-two">
Div #2
</div>
<div class="div-three">
Div #3
</div>
<div class="div-four">
Div #4
</div>
<div class="div-five">
Div #5
</div>这里有一个 JSfiddle 应该有助于展示我的意思: https://jsfiddle.net/z58ayhtw/6/
最佳答案
使用通用类来同时定位两者。在链接上添加一个简单的数据属性可用于隔离相应的内容元素
$('.tab-link').click(function(){
var contClass = $(this).data('div');
$('.content').hide().filter('.' + contClass).show()
}).content {
display: none
}
.content:first-of-type {display:block}
a {
display: inline-block;
margin-right: 10px;
padding: 5px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="tab-link" data-div="div-one">Link One</a>
<a href="#" class="tab-link" data-div="div-two">Link Two</a>
<a href="#" class="tab-link" data-div="div-three">Link Three</a>
<a href="#" class="tab-link" data-div="div-four">Link Four</a>
<a href="#" class="tab-link" data-div="div-five">Link Five</a>
<div class="div-one content">
Div #1
</div>
<div class="div-two content">
Div #2
</div>
<div class="div-three content">
Div #3
</div>
<div class="div-four content">
Div #4
</div>
<div class="div-five content">
Div #5
</div>关于javascript - 一种显示一个 Div 并隐藏所有其他 Div 的简单方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55603456/