我有一个带有标签导航的 B.html 的html页面。我在我的html页面中制作了标签,如下所示。
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
我有另一个html页面为 A.html 。在 A.html 页面中,有2个a tags
为 T1 且 T2 。当我点击 T1 时,我需要重定向到 B.html 并将内容显示为标签1 ,当我点击 T2 < / strong>,我需要重定向到 B.html 并将内容显示为标签2 。
我试过如下。
<a href="http://www.abc.com/B.html#tab1">T1</a>
<a href="http://www.abc.com/B.html#tab2">T2</a>
但这没效果。它总是选择tab1。我该如何解决这个问题?
答案 0 :(得分:2)
您可以为此使用javascript / jquery,读取哈希值并打开所需的标签:
<强>标记:强>
<div class="tabbable">
<ul class="nav nav-tabs" id='my_tab'>
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
JQUERY:
var tabs = $("#my_tab");
if (window.location.hash === '#tab1') {
$('#my_tab a:first').tab('show');
}
else if(window.location.hash === '#tab2') {
$('#my_tab a:last').tab('show');
}
以上是非常通用的代码,可根据您的需要进行优化。