2

我有一个带有标签导航的B.html页面。我在我的 html 页面中制作了 tabbable 选项卡，如下所示。

<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并将内容自己显示到Tab 1并且当我单击T2时，我需要重定向到B.html并将内容自己显示到Tab 2。

我已经尝试如下。

<a href="http://www.abc.com/B.html#tab1">T1</a>
<a href="http://www.abc.com/B.html#tab2">T2</a>

但这不起作用。它总是选择tab1。我该如何解决这个问题？

4

1 回答 1

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>

查询： 

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

以上是非常通用的代码，可以根据您的需要进行优化。

于 2013-08-26T09:48:55.360 回答