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时，“主页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

激活位置哈希的选项卡

1 个答案: