twitter-bootstrap 如何在特定选项卡处于活动状态的情况下打开 Bootstrap 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33084450/
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
How to open a Bootstrap modal with a specific tab active
提问by ConorJohn
I am trying to have the tab within the bootstrap modal open depending on what link is being clicked. No matter what I've tried it will only open up on the first tab. The two links are the following:
我试图根据单击的链接打开引导模式中的选项卡。无论我尝试过什么，它都只会在第一个选项卡上打开。两个链接如下：
<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a>
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a>
and the markup for the modal is here:
模态的标记在这里：
<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-offset-top">
<div class="modal-content">
<div class="modal-body">
<div class="sd-tabs sd-tab-interaction">
<div class="row">
<ul class="nav nav-tabs col-md-3 custom-bullet">
<li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li>
<li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li>
</ul>
<div class="tab-content col-md-9">
<form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? -->
<h3 class="tab-title">Tab 1</h3>
</form> <!-- Wrong Vehicle? -->
<form id="tab-mileage" class="tab-pane"> <!-- Mileage -->
<h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2>
<h3 class="tab-title">Tab 2</h3>
</form> <!-- Mileage -->
</div>
</div>
</div>
</div>
</div>
I need the modal to open up on the link that is clicked, for example,if I were to click on the second link it would open up the second tab in the modal. Any help would be greatly appreciated, I haven't been able to find a solution to this anywhere.
我需要在单击的链接上打开模态，例如，如果我要单击第二个链接，它将打开模态中的第二个选项卡。任何帮助将不胜感激，我一直无法在任何地方找到解决方案。
I left the original ID's in the code incase I made a mistake in replacing them.
我在代码中留下了原始 ID，以防我在替换它们时出错。
回答by Ramiz Wachtler
I've added a class .modal-toggleto the <a>elements which toggle the modals. Further, I've added some additional function which triggers on click and get's the hrefof the clicked element, after that I'm using tab("show")on the <a>element inside the <li>which matches the href. (I've added a close button inside your modal, so it's easier to test the demo)
我已经.modal-toggle为<a>切换模态的元素添加了一个类。此外，我已经添加了上点击触发条件，并得到公司的一些附加功能href点击的元素，我使用后tab("show")的上<a>内侧元素<li>相匹配的href。（我在你的模态中添加了一个关闭按钮，所以更容易测试演示）
$('.modal-toggle').click(function(e){
var tab = e.target.hash;
$('li > a[href="' + tab + '"]').tab("show");
});
回答by davidkonrad
Take benefit of the shown.bs.modalevent. The event holds info about the hrefof the clicked <a>, and then you can change the tab according to that :
从shown.bs.modal活动中受益。该事件包含有关href单击的信息<a>，然后您可以根据该信息更改选项卡：
$("#buyers-report-modal").on('shown.bs.modal', function(e) {
var tab = e.relatedTarget.hash;
$('.nav-tabs a[href="'+tab+'"]').tab('show')
})
your code working -> http://jsfiddle.net/pvo1sny8/
你的代码工作 - > http://jsfiddle.net/pvo1sny8/
回答by Sean Wessell
You need to target the tab's anchor and run the $.tab('show')function.
您需要定位选项卡的锚点并运行该$.tab('show')函数。
http://getbootstrap.com/javascript/#tabs
http://getbootstrap.com/javascript/#tabs
Since you know the tab anchor has attributes of data-toggle=tab and the href=id we can use a href from the link to pass to the selector for the tab.
由于您知道选项卡锚点具有 data-toggle=tab 和 href=id 属性，我们可以使用链接中的 href 传递给选项卡的选择器。
$('a[data-toggle=modal][data-target]').click(function () {
var target = $(this).attr('href');
$('a[data-toggle=tab][href=' + target + ']').tab('show');
})
