[英]Bootstrap Tabs using Next & Previous Buttons for Forms
I am super stuck trying to split a form up in multiple tabs but having issues with the next and previous buttons on the second and third tab.我试图在多个选项卡中拆分表单,但在第二个和第三个选项卡上的下一个和上一个按钮出现问题时遇到了问题。
I want the tabs on top to change state as you would cycle through the tabs by clicking the buttons.我希望顶部的选项卡更改状态,就像您通过单击按钮循环浏览选项卡一样。
I have created a code pen and if anyone out there knows what I am doing wrong please let me know.我已经创建了一个代码笔,如果有人知道我做错了什么,请告诉我。
https://codepen.io/austin-simpkins/pen/yLyNLem https://codepen.io/austin-simpkins/pen/yLyNLem
$('.btnNext').click(function() {
$('.nav-pills > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills > .active').prev('li').find('a').trigger('click');
});
The active
class is being set on the a.nav-link node, so you need to look for the active state of that: active
类正在 a.nav-link 节点上设置,因此您需要查找其活动状态:
$('.btnNext').click(function(){
$('.nav-item > a.nav-link.active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-item > a.nav-link.active').parent().prev('li').find('a').trigger('click');
});
The active
link is not the immediate child of nav-pills
, so remove the child ( >
) selector: active
链接不是nav-pills
的直接子nav-pills
,因此删除子级 ( >
) 选择器:
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
})
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
})
Bootstrap 4 Tabs with Previous & Next buttons 带有上一个和下一个按钮的 Bootstrap 4 选项卡
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.