在选项卡bootstrap 3向导上创建下一个和后退按钮? [英] Creating next and back button on tabs bootstrap 3 wizard?
本文介绍了在选项卡bootstrap 3向导上创建下一个和后退按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个简单的下一个和后退按钮,以通过数据attr在引导程序3中显示选项卡
I am trying to create a simple next and back button to show tabs in bootstrap 3 via data attr
这是工作的小提琴 http://jsfiddle.net/52VtD/9162/
这里是 HTML
<div class="tab-content">
<div class="tab-pane active" id="1" data-step="1">1</div>
<div class="tab-pane" id="2" data-step="2">2</div>
<div class="tab-pane" id="3" data-step="3">3</div>
<div class="tab-pane" id="4" data-step="3">4</div>
</div>
<a href="#1" data-toggle="tab" class="step-back">back</a>
<a href="#2" data-toggle="tab" class="step-next">next </a>
但是在最后一个选项卡上,我必须显示Finish而不是Next,这是某种向导,我尝试了bootstrap向导,但在3.3中不起作用:(
But on last tab i have to show Finish istead of next, this is some kind of wizard, i have tried the bootstrap wizard but i does not work in 3.3 :(
推荐答案
http://jsfiddle.net/52VtD/9197/
HTML:
<div class="tab-content">
<div class="tab-pane active" id="1" data-step="1">1</div>
<div class="tab-pane" id="2" data-step="2">2</div>
<div class="tab-pane" id="3" data-step="3">3</div>
<div class="tab-pane" id="4" data-step="4">4</div>
</div>
<a href="#1" data-toggle="tab" class="step-back">back</a>
<a href="#2" data-toggle="tab" class="step-next">next </a>
JQ:
$('.step-back, .step-next').on('shown.bs.tab', function (e) {
currentStep()
})
function currentStep() {
var currentVal = $('.tab-pane.active').attr("data-step");
currentVal = parseInt(currentVal)
var prev = currentVal - 1;
var next = currentVal + 1;
$('.step-back').attr('href','#' + prev);
$('.step-next').attr('href','#' + next);
}
- event shown.bs.tab - This event fires on tab show after a tab has been shown LINK
- attr() is function to set new href value LINK
这篇关于在选项卡bootstrap 3向导上创建下一个和后退按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文