javascript 引导程序链接到带有 url 的选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19625211/
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
Bootstrap linking to a tab with an url
提问by MariaZ
I am working with bootstrap 3, and I am having some problems on linking a url to a specific tab, the panel changes but the activated tab doesnt.
So I want the line <a href="#tab2" data-toggle="tab">link</a>, to go to the tab2, but it only goes to the panel of the tab2, it doesn't activate the tab.
我正在使用 bootstrap 3，并且在将 url 链接到特定选项卡时遇到了一些问题，面板发生了变化，但激活的选项卡没有。所以我希望行<a href="#tab2" data-toggle="tab">link</a>，转到 tab2，但它只转到 tab2 的面板，它不会激活选项卡。
Here is the html:
这是html：
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p><a href="#tab2" data-toggle="tab">link</a>.</p>
</div>
<div class="tab-pane" id="tab2">
<p> I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3 </p>
</div>
</div>
</div>
You can test this in this link http://bootply.com/90412
您可以在此链接http://bootply.com/90412中对此进行测试
回答by Rohitha
In order to activate the tab you can use jQuery plugin as shown in bootstrap. So you can add this piece of jQuery code to your program to enable the tab:
为了激活选项卡，您可以使用 jQuery 插件，如bootstrap所示。因此，您可以将这段 jQuery 代码添加到您的程序中以启用该选项卡：
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
You can check this link: Updated code
您可以查看此链接：更新的代码
回答by Bass Jobsen
The activating of the tab depends of the ul structure. In your example case you could overwrite the click event of the plugin by adding to the end of your document (after Boostrap's Javascript):
选项卡的激活取决于 ul 结构。在您的示例中，您可以通过添加到文档末尾（在 Boostrap 的 Javascript 之后）来覆盖插件的点击事件：
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
if($(this).parent().prop('tagName')!=='LI')
{
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
}
else
{
$(this).tab('show')
}
})
});
Ref: Get element type with jQuery
Note: a shorter version will also work in this case:
注意：在这种情况下，较短的版本也适用：
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
回答by Nathan
Like Rohitha's answer, but a little more general:
就像 Rohitha 的回答，但更笼统一点：
$(function () {
$('a.link-to-tab').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
Works for any anchor tag with class="link-to-tab"and an href to the tab id to be shown. For example, <a class="link-to-tab" href="#tab2">.
适用于任何带有class="link-to-tab"要显示的选项卡 ID 的 href 的锚标记。例如，<a class="link-to-tab" href="#tab2">。
