激活位置哈希的选项卡

Question

我有一个包含 3 个级别的选项卡结构：

<!-- 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 时，配置文件 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