我在 stackoverflow 上搜索过,但似乎找不到我想要的东西。我正在寻找一个简单的 jQuery 选项卡部分。 1 个选项卡控制多个内容区域(而不是标准的 1 个切换区域)。
我正在使用数据属性,我尝试使用多个输入,所以我没有重复的ID,但无济于事。
这是选项卡的 jQuery
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
var tab = $("li").data("tab").split(" ");
和 HTML:
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1 tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-2 tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-3 tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-4 tab-8">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
First content area
</div>
<div id="tab-2" class="tab-content">
Second content area
</div>
<div id="tab-3" class="tab-content">
Third content area
</div>
<div id="tab-4" class="tab-content">
Forth content area
</div>
<div id="tab-5" class="tab-content current">
First content area
</div>
<div id="tab-6" class="tab-content">
Second content area
</div>
<div id="tab-7" class="tab-content">
Third content area
</div>
<div id="tab-8" class="tab-content">
Forth content area
</div>
所以初始加载很好,但是当您单击任何选项卡时,第二个内容区域会消失,而不是像第一个内容区域那样切换。
有什么想法吗?
这是一个工作的 jsFiddle:https://jsfiddle.net/alexgomy/9tqra6ze/11/
这是一个没有 id 的解决方案(https://jsfiddle.net/L24qrbpj):
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("."+tab_id).addClass('current');
})
})
body {
margin-top: 100px;
line-height: 1.6;
}
.container {
width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0 0 20px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
margin:0 0 30px;
}
.tab-content.current {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="tab-1 tab-content current">
First content area
</div>
<div class="tab-2 tab-content">
Second content area
</div>
<div class="tab-3 tab-content">
Third content area
</div>
<div class="tab-4 tab-content">
Forth content area
</div>
<div class="tab-1 tab-content current">
First content area AVB
</div>
<div class="tab-2 tab-content">
Second content area AVB
</div>
<div class="tab-3 tab-content">
Third content area AVB
</div>
<div class="tab-4 tab-content">
Forth content area AVB
</div>
</div><!-- container -->
在你的代码中,
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
点击任何选项卡时将隐藏显示内容。
并且您可以使用toogleClass来控制要显示的内容。
这是一个工作样本
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
var tab = $(this).data("tab").split(" ");
for(var i=0; i < tab.length; i++)
{
$("#"+tab[i]).addClass('current');
}
})
})
body{
margin-top: 100px;
line-height: 1.6
}
.container{
width: 800px;
margin: 0 auto;
}
ul.tabs{
margin: 0 0 20px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
margin:0 0 30px;
}
.tab-content.current{
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1 tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-2 tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-3 tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-4 tab-8">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
First content area
</div>
<div id="tab-2" class="tab-content">
Second content area
</div>
<div id="tab-3" class="tab-content">
Third content area
</div>
<div id="tab-4" class="tab-content">
Forth content area
</div>
<div id="tab-5" class="tab-content current">
First content area
</div>
<div id="tab-6" class="tab-content">
Second content area
</div>
<div id="tab-7" class="tab-content">
Third content area
</div>
<div id="tab-8" class="tab-content">
Forth content area
</div>
我希望你需要这样
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("."+tab_id).addClass('current');
})
})
body {
margin-top: 100px;
line-height: 1.6;
}
.container {
width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0 0 20px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
margin:0 0 30px;
}
.tab-content.current {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="tab-1 tab-content current">
First content area
</div>
<div class="tab-2 tab-content">
Second content area
</div>
<div class="tab-3 tab-content">
Third content area
</div>
<div class="tab-4 tab-content">
Forth content area
</div>
<div class="tab-1 tab-content current">
First content area AVB
</div>
<div class="tab-2 tab-content">
Second content area AVB
</div>
<div class="tab-3 tab-content">
Third content area AVB
</div>
<div class="tab-4 tab-content">
Forth content area AVB
</div>
</div><!-- container -->