twitter-bootstrap 使用 Twitter Bootstrap 触发 Nav-Tab 的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16462774/
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
Button to Trigger Nav-Tab with Twitter Bootstrap
提问by sourcingsynergy
This button triggers the next tab to load content, but the tab itself does not switch, it remains on the first tab..
此按钮会触发下一个选项卡加载内容，但选项卡本身不会切换，它保留在第一个选项卡上。
<br><a class="btn btn-primary" href="#tab2" data-toggle="tab">Review</a><br>
Here is the code for nav nav-tabs:
这是导航导航标签的代码：
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
<li><a href="#tab2" data-toggle="tab">Quantities</a></li>
<li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
ANY SOLUTION for switching both the tab&contentIS APPRECIATED
任何用于切换标签和内容的解决方案都值得赞赏
..perhaps a way to change the button to trigger the next()function in * bootstrap-tab.js v2.3.1:
..也许是一种改变按钮以触发next()* bootstrap-tab.js v2.3.1中的功能的方法：
, activate: function ( element, container, callback) {
var $active = container.find('> .active')
, transition = callback
&& $.support.transition
&& $active.hasClass('fade')
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
callback && callback()
}
transition ?
$active.one($.support.transition.end, next) :
next()
$active.removeClass('in')
}
}
回答by Zim
You could assign your Review button a click handler using jQuery...
您可以使用 jQuery 为您的 Review 按钮分配一个单击处理程序...
JS:
JS：
$('#btnReview').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
HTML:
HTML：
<a class="btn btn-primary" href="#" id="btnReview">Review</a>
回答by Alex
By changing 'data-toggle' to 'data-trigger' for the triggering link, the following code can trigger any tab with the same HREF attribute, for all triggers with similar markup.
通过将触发链接的 'data-toggle' 更改为 'data-trigger'，以下代码可以为具有相似标记的所有触发器触发具有相同 HREF 属性的任何选项卡。
(N.B. Selectors are not optimised, it's just a guide to a more flexible solution)
（NB Selectors 没有优化，它只是一个更灵活的解决方案的指南）
JS:
JS：
$( '[data-trigger="tab"]' ).click( function( e ) {
var href = $( this ).attr( 'href' );
e.preventDefault();
$( '[data-toggle="tab"][href="' + href + '"]' ).trigger( 'click' );
} );
HTML:
HTML：
<a class="btn btn-primary" href="#tab2" data-trigger="tab">Review</a>
回答by Novice_JS
Using Bootstrap 4
使用引导程序 4
var nextTab;
$('.nav-link').map(function(element) {
if($(this).hasClass("active")) {
nextTab = $(this).parent().next('li');
}
})
nextTab.find('a').trigger('click');
回答by LeMeme
It's quite simple with Bootstrap 4 & JQuery, i'm using this solution:
Bootstrap 4 & JQuery 非常简单，我正在使用这个解决方案：
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
