引导选项卡：表单的下一个和上一个按钮

Posted 2023-02-22

【中文标题】引导选项卡：表单的下一个和上一个按钮

【英文标题】：Bootstrap Tabs: Next & Previous Buttons for Forms

【发布时间】：2014-04-13 10:13:44

【问题描述】：

我正在尝试（最终）将表单拆分为多个 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>

【问题讨论】：

您不能对多个按钮/一个标签使用相同的 id。尝试使用唯一的 id 更改按钮 id

【参考方案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>

【讨论】：

你有它的文档链接吗？

您想要哪些文档？代码只是说你触发了一个简单的点击之前或之后的选项卡...

小而整洁...太棒了！

非常适合我！

下一个和上一个按钮单击对我不起作用@BENARD Patrick

【参考方案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');
);

【参考方案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>

【讨论】：

仅供参考，您可以使用.tab('show')，而不是.trigger('click')。