Question

我设置了引导标签，但希望有多个导航标签来控制一个导航窗格 - 顶部和标签窗格下方的一组导航标签。如果我单击导航标签2，但下面的代码无效，但不会使用正确的“活动标签”更新导航标签1。

有谁知道如何实现这一目标？谢谢！

<!-- Nav tabs 1-->
<div class="centered-pills">    
<ul class="nav nav-pills">
  <li class="active"><a href="#a" data-toggle="tab"><span>Style</span></a></li>
  <li><a href="#b" data-toggle="tab"><span>b</span></a></li>
  <li><a href="#c" data-toggle="tab"><span>c</span></a></li>
</ul>
</div> <!-- end centered-pills -->

<div class="tab-content">
<div class="tab-pane fade in active" id="a"></div>
<div class="tab-pane fade in" id="b"></div>
<div class="tab-pane fade in" id="b"></div>
</div> <!-- end tab-content -->

 <!-- Nav tabs 2-->
<div class="centered-pills">    
<ul class="nav nav-pills">
  <li class="active"><a href="#a" data-toggle="tab"><span>Style</span></a></li>
  <li><a href="#b" data-toggle="tab"><span>b</span></a></li>
  <li><a href="#c" data-toggle="tab"><span>c</span></a></li>
</ul>
</div> <!-- end centered-pills -->

Answer 1

这最终为我工作

$(document).ready(function() {
if(location.hash) {
   $('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});

Bootstrap 3 - 使用2个相同的Nav选项卡控制导航面板 - 更新两者的活动类

1 个答案: