转到不同页面链接上的特定选项卡单击并切换活动类 [英] Go to Specific Tab on different Page link click and toggle active class

问题描述

我正在开发一个使用 Twitter 的 Bootstrap 框架和他们的 Bootstrap Tabs JS 的网页.它工作得很好，但我试图在标签面板之外添加额外的链接来打开标签，点击 ul --> li 链接.

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great but I am trying to add extra links outside the tabs panel to open the tabs, it works fine clicking the tabs link under the ul --> li links.

但是，当我单击 nav panel-tabs 之外的链接时，如何才能将选项卡面板开关和 active 类添加到nav panel-tabs li CSS 类元素在单击 nav panel 本身之外的链接时(作为 <在我的例子中，code>active 类显示不同的背景颜色).

But when I click a link outside the nav panel-tabs how can I have the tab panel switch and the active class added to the nav panel-tabs li CSS class element when clicking a link outside the nav panel itself (as the active class shows a different background color in my case).

例如:

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

These links are outside the panel code up the page:

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

我需要切换标签类的状态 <ul class="nav panel-tabs"> --> <li> 在点击其他链接时将其激活并删除.

I need to toggle the state of the tab class <ul class="nav panel-tabs"> --> <li> to active and remove it when the other links are clicked.

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

This is the panel with nav tabs:

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

推荐答案

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

You can use jQuery to get the page url #hash 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;
});

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

演示(选择选项卡 2):http://codeply.com/render/RypzN2UXKF#tab2

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

这篇关于转到不同页面链接上的特定选项卡单击并切换活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！