[英]Bootstrap: next button should display next tab
I want to implement a custom next button into the bootstrap tab navigation. 我想在bootstrap选项卡导航中实现自定义下一步按钮。
When clicking on the next-button, the next tab should be displayed as active. 单击下一个按钮时,下一个选项卡应显示为活动状态。 If the last tab is reached it should start with the first tab.
如果到达最后一个选项卡,它应该从第一个选项卡开始。
This solve your problem 这解决了你的问题
$('.next-tab').click(function(e){
if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
$('.nav-tabs > li').first('li').find('a').trigger('click');
}else{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
e.preventDefault();
});
http://www.bootply.com/XYpxMIgink http://www.bootply.com/XYpxMIgink
I Recently needed this functionality and this is what I ended up with: 我最近需要这个功能,这就是我最终的结果:
$('.change-tab').click(function() { var $this = $(this); var $nav = $($this.data('target')) var $tabs = $nav.find('li'); var $curTab = $tabs.filter('.active'); var cur = $tabs.index($curTab); if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a'); else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a'); $showTab.tab('show'); }); // normal tabs code $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }); $(function () { $('#myTab a:last').tab('show'); })
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a> </li> <li><a href="#profile">Profile</a> </li> <li><a href="#messages">Messages</a> </li> <li><a href="#settings">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Home content...</div> <div class="tab-pane" id="profile">Content here...</div> <div class="tab-pane" id="messages">Messages...</div> <div class="tab-pane" id="settings">Settings...</div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-toolbar pull-right"> <div class="btn-group"> <button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button> <button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> </button> </div> </div> </div> </div>
I am using @DelightedD0D provided solution. 我正在使用@ DelightedD0D提供的解决方案。 When the page load, the control stop on the last tab always.
当页面加载时,控件始终在最后一个选项卡上停止。 If you want to fix this, please update the following function
如果您想解决此问题,请更新以下功能
$(function () {
$('#myTab a:last').tab('show');
})
to 至
$(function () {
$('#myTab a:active').tab('show');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.