Javascript 转到不同页面链接上的特定选项卡单击并切换活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30990508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Go to Specific Tab on different Page link click and toggle active class
提问by xop32
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-->lilinks.
我正在开发一个网页，我在其中使用 Twitter 的 Bootstrap 框架和他们的 Bootstrap Tabs JS。它工作得很好，但我试图在选项卡面板之外添加额外的链接以打开选项卡，单击链接下的选项卡链接可以正常工作。ul-->li
But when I click a link outside the nav panel-tabshow can I have the tab panel switch and the activeclass added to the nav panel-tabsliCSS class element when clicking a link outside the nav panelitself (as the activeclass shows a different background color in my case).
但是，当我单击外部链接时，nav panel-tabs如何在单击外部链接时将选项卡面板切换和active类添加到CSS 类元素中（因为类在我的情况下显示不同的背景颜色）。nav panel-tabslinav panelactive
For example:
例如：
These links are outside the panel code up the page:
这些链接位于页面上方的面板代码之外：
<a href="page.php#gallery">Gallery</a>
<a href="page.php#movies">Movies</a>
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.
我需要将选项卡类的状态切换为活动状态，并在单击其他链接时将其删除。<ul class="nav panel-tabs">--><li>
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>
回答by Zim
You can use jQuery to get the page url #hash and select the Bootstrap tab...
您可以使用 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;
});
Code: http://codeply.com/go/RypzN2UXKF
代码：http: //codeply.com/go/RypzN2UXKF
Demo (select tab 2): http://codeply.com/render/RypzN2UXKF#tab2
演示（选择选项卡 2）：http: //codeply.com/render/RypzN2UXKF#tab2
