转到不同页面上的特定选项卡 link 单击并切换为活动状态 class

Question

我正在开发一个网页，我在其中使用了 Twitter 的 Bootstrap 框架及其 Bootstrap Tabs JS。它工作得很好，但我试图在选项卡面板外添加额外的 links 以打开选项卡，单击 ul [= 下的选项卡 link 效果很好15=]lilinks.

但是当我点击 nav panel-tabs 之外的 link 时，我怎样才能让选项卡面板切换和 active class 添加到 nav panel-tabs li CSS class 元素时单击 [=21= 外的 link ] 本身（因为 active class 在我的例子中显示了不同的背景颜色）。

例如：

这些 link 在页面上方的面板代码之外：

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

我需要切换选项卡的状态 class <ul class="nav panel-tabs"> --> <li> 以激活并在单击其他 link。

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

<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 和 select 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

演示（select 选项卡 2）：http://codeply.com/render/RypzN2UXKF#tab2

转到不同页面上的特定选项卡 link 单击并切换为活动状态 class

Go to Specific Tab on different Page link click and toggle active class

html

javascript

tabs

twitter-bootstrap-3