在来自另一个 link Bootstrap 的选项卡导航中设置活动选项卡

Question

EDIT ：这不是我的主导航栏，它是表单内的导航栏。此标签导航仅存在于 resources-terms.html

我有一个位于 resources-terms.html 的标签导航，它是

<div class="tabbable">
  <ul class="nav nav-tabs" id="tab_bar">
      <li class="active"><a href="#tab1" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i>AU and NZ Terms & Conditions</a></li>
      <li><a href="#tab2" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> UK Terms & Conditions </a></li>
   </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1"> Content 1</div>
        <div class="tab-pane active" id="tab2"> Content 2</div>
    </div>
</div>

假设我正在查看 index.html 我需要直接转到 resources-terms.html 的 index.html 格式应该是什么？已经选择并激活了 tab2？

我尝试了 <a href="resources-terms.html#tab2>Link</a>" 但没有成功。

Answer 1

您要查找的内容（通过 location.hash 值导航至特定选项卡）不会自行出现。您需要在 resources-terms.html 文件中处理此问题。

页面完全加载后，读取哈希并将相应的选项卡设置为活动状态，如下所示：

$(document).ready(function(){
    if (location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
    }
});

在来自另一个 link Bootstrap 的选项卡导航中设置活动选项卡

Set Active Tab in Tab Nav coming from another link Bootstrap

html

tabs

hyperlink

twitter-bootstrap