Jquery 激活位置哈希的选项卡

我有一个三级选项卡结构：

<!-- 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>

主页内容。





主页2内容。





主页3-1内容

简介3-1内容

简介2内容。





主页3-2内容

简介3-2内容

配置文件内容。

可以在此处检查此代码：（）

访问链接时，“配置文件3-1”选项卡将显示为活动状态。但是，例如，当访问Home 3-2选项卡时，该选项卡不处于活动状态

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

这是因为

#home3-2

嵌套在隐藏的选项卡中

从另一个角度来看，下面的代码会发生什么情况

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

你可以这样做：

//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');
});

小提琴演示：

---

谢谢，@KyleMit。你的代码非常有效。我在实际项目中遇到多个选项卡的问题。我会给你发一封电子邮件。拥抱！

//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');
});