Go to the tab "Special contribution" on another page, click and switch the active class

Question

I am developing a webpage in which I use Twitter Bootstrap Framework and their Bootstrap JS tabs. It works fine, but I'm trying to add additional links behind the tab bar to open the tabs, it works fine by clicking the tab link in the links .ul --> li

But when I click the link outside , how can I set the tab bar switch and the class added to the CSS Class Element when the link is clicked outside (since the class shows my background color in my case). nav panel-tabsactive nav panel-tabs linav panelactive

For instance:

These links are located outside the panel code up the page:

<a href="page.php#gallery">Gallery</a>
<a href="page.php#movies">Movies</a>

I need to switch the state of the tab class to active and delete it when clicking other links.<ul class="nav panel-tabs"> --> <li>

This is the nav tabbed panel:

<div class="panel-heading">
    <div class="padpanel">Panel Heading</div>
    <div class="pull-left">
        <ul class="nav panel-tabs">
            <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
            <li><a href="#gallery" data-toggle="tab">Gallery</a></li>
            <li><a href="#movies" data-toggle="tab">Movies</a></li>
        </ul>
    </div>
</div>

<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane active" id="profile">Profile tab </div>
    </div>
</div>
<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane" id="gallery">Gallery tab </div>
    </div>
</div>
<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane" id="movies">Movies tab </div>
    </div>
</div>

Answer 1

You can use jQuery to get the URL of the #hash page and select the Bootstrap tab ...

var hash = document.location.hash;
if (hash) {
    $('.nav-tabs a[href='+hash+']').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

Code: http://codeply.com/go/RypzN2UXKF

Demo (select tab 2): http://codeply.com/render/RypzN2UXKF#tab2