我想使用多组导航按钮来控制单个选项卡窗格。当前,当在另一个导航组中激活新的导航时,前一个导航不会被停用。因此,在任何给定时间都会激活两个导航按钮。
第一个导航菜单:
<!-- Nav Menu 1 -->
<ul class="nav nav-pills nav-stacked" id="myTab">
<li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
<li><a href="#tab-2" data-toggle="tab">TAB TWO</li>
<li><a href="#tab-3" data-toggle="tab">TAB THREE</li></ul>
第二个导航菜单:
<!-- Nav Menu 2 -->
<ul class="nav nav-pills nav-stacked" id="myTab">
<li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
<li><a href="#tab-5" data-toggle="tab">TAB FIVE</li>
<li><a href="#tab-6" data-toggle="tab">TAB SIX</li> </ul>
选项卡面板:
<div class="tab-content" id="myTab">
<div class="tab-pane fade in active" id="tab-1">
<p>TAB ONE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-2">
<p>TAB TWO CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-3">
<p>TAB THREE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-4">
<p>TAB FOUR CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-5">
<p>TAB FIVE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-6">
<p>TAB SIX CONTENT</p>
</div>
同样,按钮正确控制选项卡面板,但当从另一个导航分区单击一个时,上一个导航按钮不会被停用。
根据我对问题的理解,如果单击第二组,则需要删除第一组中的class="active"
链接,反之亦然。我使用一个快速而肮脏的Javascript函数实现了这一点:
Html:
<ul class="nav nav-pills nav-stacked" id="tabGroupOne">
<li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
<li><a href="#tab-2" data-toggle="tab">TAB TWO</a></li>
<li><a href="#tab-3" data-toggle="tab">TAB THREE</a></li>
</ul>
<ul class="nav nav-pills nav-stacked" id="tabGroupTwo">
<li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
<li><a href="#tab-5" data-toggle="tab">TAB FIVE</a></li>
<li><a href="#tab-6" data-toggle="tab">TAB SIX</a></li>
</ul>
Javascript/jQuery:
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
});
基本上,当您单击列表一中的任何<li>
项目时,它将删除组二中任何链接的活动类。反之亦然,单击第二组中的任何链接。
另一种选择是,每当点击任何链接时,禁用所有其他ul class="nav nav-pills"
子级,但只要您将导航保持为最多两个,以上内容就足够了。
注意,您还遇到了一些html
标记问题:多个ID和缺少</a>
标记。这些也可能导致您的代码行为异常。
这是工作版本:
Bootply