以前的表单按钮

以前的表单按钮

关注
发信
关注(28)粉丝(399)

Bootstrap 标签:下一个 &以前的表单按钮

本文介绍了Bootstrap 标签:下一个 &以前的表单按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

    <li class="active"><a href="#tab1" data-toggle="tab">运费</a></li><li><a href="#tab2" data-toggle="tab">数量</a></li><li><a href="#tab3" data-toggle="tab">总结</a></li>
<div class="tab-content"><div class="tab-pane active" id="tab1"><a class="btn btn-primary" id="btnNext">Next</a>

<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 class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnPrevious">Previous</a>

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

解决方案

任何想要在选项卡上执行下一个先前操作的人，请按照以下步骤操作:

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

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

c) 点击触发点击下一个/上一个标签

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

/**** JQuery *******/jQuery('body').on('click','.next-tab', function(){var next = jQuery('.nav-tabs > .active').next('li');如果(下一个.长度){next.find('a').trigger('click');}别的{jQuery('#myTabs a:first').tab('show');}});jQuery('body').on('click','.previous-tab', function(){var prev = jQuery('.nav-tabs > .active').prev('li')如果(上一个长度){prev.find('a').trigger('click');}别的{jQuery('#myTabs a:last').tab('show');}});
/******* CSS *********/.previous-tab，.next-tab{显示:内联块；边框:1px 实心 #444348；边框半径:3px；边距:5px；颜色:#444348；字体大小:14px；填充:10px 15px；光标:指针；}
<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/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7"<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 role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Step2</a></li><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="step1"><p>tab1 内容</p><p>//在标签内容中包含下一个上一个按钮</p><span class="previous-tab">previous</span><span class="next-tab">next</span>

<div role="tabpanel" class="tab-panel" id="step2"><p>tab2内容</p><p>//在标签内容中包含下一个上一个按钮</p><span class="previous-tab">previous</span><span class="next-tab">next</span>

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions and sometimes the tab content doesn't change at all between tabs when the tabs are manually clicked OR using the buttons.

<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>
解决方案

Anyone who want to perform next previous operations on tab, follow following steps:

a) Put next prev buttons in each tab-panel

b) Bind the buttons clicks to body so that it will be called on click

c) On click trigger click of next/prev tab

d) If it is last tab redirect user to appropriate tab (Call show events of first or last tab)

/**** 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 标签:下一个 &amp;以前的表单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-19 09:35
Powered by LMLPHP ©2024 以前的表单按钮 0.056096