激活位置哈希的选项卡
[英] Activate the tab of the location hash
本文介绍了激活位置哈希的选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含 3 个级别的选项卡结构:
<ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#home" role="tab" data-toggle="tab">首页</a></li><li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li><!-- 选项卡窗格 - 第一级 --><div class="tab-content"><div class="tab-pane active" id="home"><p>主页内容.</p><!-- 导航选项卡 - 第二级 --><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">配置文件 2</a></li><!-- 选项卡窗格 - 第二级 --><div class="tab-content"><div class="tab-pane active" id="home2"><p>首页 2 内容.</p><!-- 导航选项卡 - 第三级 --><ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#home3-1" role="tab" data-toggle="tab">首页3-1</a></li><li><a href="#profile3-1" role="tab" data-toggle="tab">配置文件 3-1</a></li><!-- 选项卡窗格 - 第三级 --><div class="tab-content"><div class="tab-pane active" id="home3-1"><p>首页 3-1 内容.</p></div><div class="tab-pane" id="profile3-1"><p>Profile 3-1 内容.</p></div>
<div class="tab-pane" id="profile2"><p>配置文件 2 内容.</p><!-- 导航选项卡 - 第三级 --><ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#home3-2" role="tab" data-toggle="tab">首页3-2</a></li><li><a href="#profile3-2" role="tab" data-toggle="tab">配置文件 3-2</a></li><!-- 选项卡窗格 - 第三级 --><div class="tab-content"><div class="tab-pane active" id="home3-2"><p>首页 3-2 内容.</p></div><div class="tab-pane" id="profile3-2"><p>Profile 3-2 内容.</p></div>
<div class="tab-pane" id="profile">个人资料内容.</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 解决这个问题?谢谢！
解决方案
那是因为 #home3-2 嵌套在隐藏的选项卡中.
另一种看待这个问题的方法是以下代码会发生什么?:
1<div style="display:none">2<div style="display:block">3
即使您使底部 div 可见，它仍会被其父级隐藏.
加载页面时，您必须遍历 dom 以查找任何隐藏的父选项卡，并对它们调用 show.
if (location.hash) {$('a[href=' + location.hash + ']').tab('show');//代码也显示父选项卡}
你可以这样做:
//获取散列元素并找到所有未激活的父选项卡$(location.hash).parents('.tab-pane:not(.active)').each(function() {//每个窗格都应该有一个 id - 找到它的锚点目标并调用 show$('a[href=#' + this.id + ']').tab('show');});
小提琴演示:
http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2
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>
This code could be checked here: (http://jsfiddle.net/bvta2/3/).
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.
How can I solve this using jQuery? Thanks!
解决方案
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>
Even though you have made the bottom div visible, it will still be hidden by its parent.
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
}
You could do that like this:
//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');
});
Demo in fiddle:
http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2
这篇关于激活位置哈希的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
