Question

我创建了一个导航到下一个标签的按钮 - 一旦下一个按钮到达最后一个标签就停止了，如何通过到达最后一个标签将其设置为重新开始？

我希望能够使用下一个按钮简单地遍历所有标签....

这是我的Fiddle

这是基本的js

 $('.next_btn').click(function() {

    $('.nav-tabs > .active').next('li').find('a').trigger('click');
 });

Answer 1

您可以使用http://jsfiddle.net/808cvx43/2/

＆＃13;

jQuery(function() {
  jQuery('#myTab a:last').tab('show');
  
  $('.next_btn').click(function() {
		if($('.nav-tabs > li:last-child').hasClass('active')){
    	$('.nav > li:last-child').removeClass('active');
      $('.nav > li:first-child').addClass('active');
    }else{
    	$('.nav-tabs > .active').next('li').find('a').trigger('click');
    }
	});
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
  <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
  <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Message</div>
  <div class="tab-pane" id="settings">Settings</div>
</div>

<button type="submit" class="next_btn">
Next Tab
</button>

＆＃13;

为Bootstrap选项卡创建按钮以循环所有选项卡

1 个答案: