jQuery 从外部链接到 Bootstrap 选项卡 - 如何将选项卡设置为“活动”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19814481/
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
Linking to a Bootstrap Tab from outside - how to set the tab to "active"?
提问by user1227914
I have a Bootstrap "tab" navigation with 3 different content tabs. It works perfectly except that I want to link to one of the tabs from OUTSIDE the tab navigation. Meaning that when someone clicks a link outside the tab window, it should set to "active" that tab and show the content.
我有一个带有 3 个不同内容选项卡的 Bootstrap“选项卡”导航。除了我想链接到选项卡导航之外的选项卡之一之外，它工作得很好。这意味着当有人单击选项卡窗口外的链接时，它应该设置为“活动”该选项卡并显示内容。
Right now, it shows the content of that tab correctly, but the tab is not set to "active". How do I achieve this so that it should as "active" as if someone had clicked?
现在，它正确显示了该选项卡的内容，但该选项卡未设置为“活动”。我如何实现这一点，以便它应该像有人点击一样“活跃”？
Here is the code:
这是代码：
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home Content</div>
<div class="tab-pane" id="profile">Profile Content</div>
<div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>
<p></p>
<a href="#profile" data-toggle="tab">Profile Link From Outside</a>
I made a jsFiddle to show it better: http://jsfiddle.net/fLJ9E/
我做了一个 jsFiddle 来更好地展示它：http: //jsfiddle.net/fLJ9E/
Thank you very much for any help or hints :)
非常感谢您的任何帮助或提示:)
回答by claustrofob
You can do a small trick to achieve this:
你可以做一个小技巧来实现这一点：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = this.href.split('#');
$('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})
回答by Omiod
I had the same issue, and opted to just trigger a click event on the proper tab, and let Bootstrap do what is needed.
我遇到了同样的问题，并选择在正确的选项卡上触发一个点击事件，让 Bootstrap 做需要的事情。
$('#link').on('click', function(){
$('.nav-tabs a[href="#profile"]').click();
});
回答by Myke Black
The simplest answer is to do it like this:
最简单的答案是这样做：
<a href="#" id="profilelink">Profile Link From Outside</a>
then in javascript add:
然后在javascript中添加：
$(document).ready(function () {
$("#profilelink").click(function () {
$('.nav a[href="#profile"]').tab('show');
});
});
This will change both the content view and the active button on the top using the built in method of the jquery tabs plugin. If you wanted to add more buttons outside the tab area, then you can make it more general eg.
这将使用 jquery tabs 插件的内置方法更改顶部的内容视图和活动按钮。如果您想在选项卡区域之外添加更多按钮，那么您可以使其更通用，例如。
<a href="#profile" class="outsidelink">Profile Link From Outside</a>
$(document).ready(function () {
$(".outsidelink").click(function () {
$('.nav a[href="' + $(this).attr("href") + '"]').tab('show');
});
});
回答by Manu L
Below the little trick I did that works for me.
在我做的对我有用的小技巧下面。
I can call the webpage adding the bootstrap pill id to the URL.
我可以调用将引导程序药丸 ID 添加到 URL 的网页。
For instance calling mypage.html#other_id will display the pill matching #other_id
例如调用 mypage.html#other_id 将显示匹配 #other_id 的药丸
<ul class="nav nav-pills">
<li class="active"><a href="#default_id" data-toggle="pill">Default tab</a></li>
<li><a href="#other_id" data-toggle="pill">Other tab</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="default_id">
...
</div>
<div class="tab-pane" id="other_id">
...
</div>
</div>
Here the JQuery code:
这里的 JQuery 代码：
$(document).ready(function(){
//Manage hash in URL to open the right pill
var hash = window.location.hash;
// If a hash is provided
if(hash && hash.length>0)
{
// Manage Pill titles
$('ul.nav-pills li a').each(function( index ) {
if($(this).attr('href')==hash)
$(this).parent('li').addClass('active');
else
$(this).parent('li').removeClass('active');
});
// Manage Tab content
var hash = hash.substring(1); // Remove the #
$('div.tab-content div').each(function( index ) {
if($(this).attr('id')==hash)
$(this).addClass('active');
else
$(this).removeClass('active');
});
}
});
Edit: My code is not exactly what you need but you can update it to match your needs. Tell me if you need explanations
编辑：我的代码并不完全符合您的需求，但您可以更新它以满足您的需求。告诉我你是否需要解释
回答by James_1x0
Probably need to just add/subtract classes when you add an external link. It not really bound to the tab at all.
添加外部链接时可能只需要添加/减去类。它根本没有真正绑定到选项卡。
$(".outside-link").click(function() {
$(".nav li").removeClass("active");
$($(this).attr("data-toggle-tab")).parent("li").addClass("active");
});
Working Fiddle: http://jsfiddle.net/Bp2jm/
工作小提琴：http: //jsfiddle.net/Bp2jm/
回答by amedriveroperez
Try this:
尝试这个：
<li ....>
<a href="#tab-number">Tab Title</a>
</li>
and them your url look like this: "[URL]#tab-number"
他们的网址如下所示：“[URL]#tab-number”
I hope help you.... Regards...
我希望能帮助你.... 问候...
回答by Jules
Based on Omiod response, (I don't have enough rep to put it as a comment -- doh!)
基于 Omiod 的回应，（我没有足够的代表将其作为评论 - 哦！）
A one-liner to do the same without the extra script markup:
在没有额外脚本标记的情况下执行相同操作的单行：
<a href="javascript:void(0);" onclick="$('.nav-tabs a[href=\'#TABID\']').click();">LINK NAME</a>
