在来自另一个链接Bootstrap的Tab Nav中设置活动选项卡 [英] Set Active Tab in Tab Nav coming from another link Bootstrap

问题描述

编辑：这不是我的主导航栏，它是表单内的导航栏。此Tab Nav仅存在于 resources-terms.html中

EDIT : This is not my Main Navigation Bar, it is a Nav Bar inside a Form. This Tab Nav only exists in resources-terms.html

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

I have a Tab Navigation located at resources-terms.html which is

<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 的链接格式，而且tab2已经选择并激活？

Let's say I am viewing index.html what should be the link format that I need to directly go to resources-terms.html with the tab2 already selected and active?

我尝试了< a href =resources-terms.html＃tab2>链接< / a>，但没有成功。

I tried <a href="resources-terms.html#tab2>Link</a>" but did not work.

推荐答案

您在寻找什么（通过 location.hash 值导航到特定标签）将不会发生在它自己的。您需要在 resources-terms.html 文件中处理这个问题。

What you're looking for (navigating to a particular tab via location.hash value) will not happen on it's own. You'll need to handle this in your resources-terms.html file.

完成页面加载后，阅读哈希，并设置相应的选项卡激活，如下所示：

After the page is completely loaded, read the hash and set the corresponding tab active as shown below:

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

这篇关于在来自另一个链接Bootstrap的Tab Nav中设置活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！