Set Active Tab in Tab Nav coming from another link Bootstrap

问题

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

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>

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?

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

回答1:

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

来源：https://stackoverflow.com/questions/33079451/set-active-tab-in-tab-nav-coming-from-another-link-bootstrap