激活位置散列的选项卡。

Question

我有一个有三个层次的标签结构：

<!-- Nav tabs - First level -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>    
<!-- Tab panes - First level -->
<div class="tab-content">
  <div class="tab-pane active" id="home">       
    <p>Home content.</p>      
    <!-- Nav tabs - Second level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home2" role="tab" data-toggle="tab">Home 2</a></li>
      <li><a href="#profile2" role="tab" data-toggle="tab">Profile 2</a></li>
    </ul>    
    <!-- Tab panes - Second level -->
    <div class="tab-content">
      <div class="tab-pane active" id="home2">          
      <p>Home 2 content.</p>              
      <!-- Nav tabs - Third level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home3-1" role="tab" data-toggle="tab">Home 3-1</a></li>
      <li><a href="#profile3-1" role="tab" data-toggle="tab">Profile 3-1</a></li> 
    </ul>    
    <!-- Tab panes - Third level -->
    <div class="tab-content">
      <div class="tab-pane active" id="home3-1"><p>Home 3-1 content.</p></div>
      <div class="tab-pane" id="profile3-1"><p>Profile 3-1 content.</p></div>
    </div>          
      </div>
      <div class="tab-pane" id="profile2">
      <p>Profile 2 content.</p>         
      <!-- Nav tabs - Third level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home3-2" role="tab" data-toggle="tab">Home 3-2</a></li>
      <li><a href="#profile3-2" role="tab" data-toggle="tab">Profile 3-2</a></li> 
    </ul>
      <!-- Tab panes - Third level -->
    <div class="tab-content">
      <div class="tab-pane active" id="home3-2"><p>Home 3-2 content.</p></div>
      <div class="tab-pane" id="profile3-2"><p>Profile 3-2 content.</p></div>
    </div>           
      </div>
    </div>         
  </div>
  <div class="tab-pane" id="profile">Profile content.</div>
</div>

可以在这里检查此代码：(http://jsfiddle.net/bvta2/3/)。

当您访问链接http://fiddle.jshell.net/bvta2/3/show/#profile3-1时，Profile 3-1选项卡显示为活动状态.但是，例如，在访问http://fiddle.jshell.net/bvta2/3/show/#home3-2时，Home 3-2选项卡没有活动.

如何使用jQuery解决这个问题？谢谢!

Answer 1

这是因为#home3-2嵌套在隐藏的选项卡中。

另一种看待这一点的方法是，下面的代码会发生什么？：

<div> 1
    <div style="display:none"> 2
        <div style="display:block"> 3 </div>
    </div>
</div>

即使您已经使底部div可见，它仍然会被它的父级隐藏。

在加载页面时，您必须遍历dom中的任何隐藏父选项卡，并在它们上调用show。

if (location.hash) {
    $('a[href=' + location.hash + ']').tab('show');
    // code to also show parent tabs
}

你可以这样做：

//get the hashed element and find all of it's parent tabs that aren't active
$(location.hash).parents('.tab-pane:not(.active)').each(function() {
    //each pane should have an id - find it's anchor target and call show
    $('a[href=#' + this.id + ']').tab('show');
});

小提琴演示：

http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2