[英]Button to Trigger Nav-Tab with Twitter Bootstrap
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: 以下是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&content IS APPRECIATED 用于切换标签和内容的任何解决方案均为 APPRECIATED
..perhaps a way to change the button to trigger the next()
function in * bootstrap-tab.js v2.3.1: ..也许是一种更改按钮以触发* bootstrap-tab.js v2.3.1中的
next()
函数的方法:
, 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')
}
}
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 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. 通过将触发链接的“数据切换”更改为“数据触发”,对于具有相似标记的所有触发器,以下代码可以触发具有相同HREF属性的任何选项卡。
(NB Selectors are not optimised, it's just a guide to a more flexible solution) (NB选择器未经过优化,它只是更灵活解决方案的指南)
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>
Using Bootstrap 4 使用Bootstrap 4
var nextTab;
$('.nav-link').map(function(element) {
if($(this).hasClass("active")) {
nextTab = $(this).parent().next('li');
}
})
nextTab.find('a').trigger('click');
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');
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.