具有多个内容区域的 jQuery 选项卡

问题描述 投票：0回答：4

我在 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/

jquery tabs
4个回答
2
投票

这是一个没有 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 -->

0
投票

在你的代码中，

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

点击任何选项卡时将隐藏显示内容。

并且您可以使用toogleClass来控制要显示的内容。

这是一个工作样本

https://jsfiddle.net/dwf1jsgq/

0
投票

 $(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>

我希望你需要这样

0
投票

$(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 -->

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.