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

时间:2015-06-22 21:55:31

标签: javascript html twitter-bootstrap-3 tabs

我正在开发一个网页,其中我正在使用Twitter的Bootstrap Framework及其Bootstrap Tabs JS。它工作得很好,但我尝试在标签面板外添加额外的链接以打开标签,它可以正常点击ul --> {{1}下的标签链接}链接。

但是当我点击 li 之外的链接时,如何让标签面板切换并将nav panel-tabs类添加到 active nav panel-tabs单击li本身之外的链接时的CSS类元素(因为nav panel类在我的情况下显示不同的背景颜色)。

例如:

这些链接位于页面上的面板代码之外:

active

我需要将标签类<a href="page.php#gallery">Gallery</a> <a href="page.php#movies">Movies</a> <ul class="nav panel-tabs"> -->的状态切换为有效状态,并在点击其他链接时将其删除。

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

<li>

1 个答案:

答案 0 :(得分:7)

您可以使用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