Question

我正在尝试（最终）将表单拆分为几个Bootstrap 3.x选项卡，但我遇到了上一个和下一个按钮的问题。当手动点击标签或使用按钮时，只有第一个下一个按钮起作用，有时标签内容在标签之间根本不会改变。

<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>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary" id="btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnNext">Next</a>
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
</div>
<script>
  $('#btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('#btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

Answer 1

首先是全部： ID必须是独一无二的

以下是您的工作代码：http://www.bootply.com/120472

HTML：

<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>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

JS：

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

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

<强>段：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

Answer 2

用于引导程序4

<button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>


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

$('.previous').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});

Answer 3

想要在标签上执行下一个先前操作的任何人，请执行以下步骤：

a）在每个标签面板中放置下一个上一个按钮

b）将点击的按钮绑定到正文，以便在点击时调用它

c）在点击触发条件下，点击“下一个/上一个”标签

d）如果是最后一个标签，则将用户重定向到适当的标签（呼叫显示第一个或最后一个标签的事件）

/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
      var next = jQuery('.nav-tabs > .active').next('li');
      if(next.length){
        next.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:first').tab('show');
      }
});

jQuery('body').on('click','.previous-tab', function(){
      var prev = jQuery('.nav-tabs > .active').prev('li')
      if(prev.length){
        prev.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:last').tab('show');
      }
});

/******* CSS *********/
.previous-tab,
.next-tab{
	display: inline-block;
	border: 1px solid #444348;
	border-radius: 3px;
	margin: 5px;
	color: #444348;
	font-size: 14px;
	padding: 10px 15px;
	cursor: pointer;
}

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Step1</a></li>
    <li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Step2</a></li>
</ul>
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="step1">
    <p>tab1 content</p>
		<p>//Include next prev buttons in the tab-content</p>
		<span class="previous-tab">previous</span>
		<span class="next-tab">next</span>
    </div>
    <div role="tabpanel" class="tab-pane" id="step2">
		<p>tab2 content</p>
    <p>//Include next prev buttons in the tab-content</p>
		<span class="previous-tab">previous</span>
		<span class="next-tab">next</span>
	</div>
</div>

Bootstrap选项卡：下一步;以前的表格按钮

3 个答案: