转到不同页面链接上的特定选项卡单击并切换活动类

Question

我正在开发一个网页，其中我正在使用Twitter的Bootstrap Framework和他们的Bootstrap Tabs JS。 它工作得很好，但我试图在选项卡面板外添加额外的链接来打开选项卡，它可以正常点击ul --> li链接下的选项卡链接。

但是，当我单击nav panel-tabs外部的链接时，如何单击nav panel本身外部的链接（如active类所示），如何将选项卡面板切换并将active类添加到nav panel-tabs li CSS类元素在我的情况下不同的背景颜色）。

例如：

这些链接位于页面面板代码之外：

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

我需要将选项卡类的状态<ul class="nav panel-tabs"> --> <li>切换为活动状态，并在单击其他链接时将其删除。

这是带有导航标签的面板：

<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

您可以使用jQuery获取页面URL #hash并选择Bootstrap选项卡...

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

代码： http ： //codeply.com/go/RypzN2UXKF

演示（选择标签2）： http ： //codeply.com/render/RypzN2UXKF#tab2