激活位置哈希的标签 [英] Activate the tab of the location hash

问题描述

我具有3个级别的标签结构:

I have a structure of tabs with 3 levels:

<!-- 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/).

This code could be checked here: (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"选项卡不处于活动状态.

When you access the link http://fiddle.jshell.net/bvta2/3/show/#profile3-1, the Profile 3-1 tab appears active. However, when accessing http://fiddle.jshell.net/bvta2/3/show/#home3-2, for example, the Home 3-2 tab is not active.

如何使用jQuery解决此问题?谢谢！

How can I solve this using jQuery? Thanks!

推荐答案

这是因为#home3-2嵌套在隐藏的标签中.

That's because #home3-2 is nested within a tab that is hidden.

查看此问题的另一种方法是以下代码会发生什么?

Another way to look at this is what would happen for the following code?:

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

即使您使底部div可见，它的父级仍将其隐藏.

Even though you have made the bottom div visible, it will still be hidden by its parent.

加载页面时，您必须遍历所有隐藏的父选项卡的dom并在其上调用show.

When loading the page, you'll have to traverse the dom for any hidden parent tabs and call show on them as well.

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

这篇关于激活位置哈希的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！