Bootstrap 标签:下一个 &以前的表单按钮 [英] Bootstrap Tabs: Next & Previous Buttons for Forms

问题描述

我试图(最终)将一个表单拆分到多个 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>