在选项卡引导程序 3 向导上创建下一步和返回按钮？答案

【问题标题】：Creating next and back button on tabs bootstrap 3 wizard?在选项卡引导程序 3 向导上创建下一步和返回按钮？
【发布时间】：2014-11-21 18:23:55
【问题描述】：

我正在尝试创建一个简单的下一步和后退按钮，以通过数据属性在引导程序 3 中显示选项卡

这是工作小提琴 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，这是某种向导，我尝试了引导向导，但在 3.3 中无法使用 :(

【问题讨论】：

步数是一样的，还是动态的？
如果有人添加自动下一步和返回工作的新选项卡窗格，并且在第一步不显示回来，那就太好了？
现在，您可以使用 Bootstrap 向导插件。 panopta.com/2013/02/06/bootstrap-application-wizard-2

标签： jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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 - 此事件在标签显示后触发LINK
attr() 是设置新href值LINK的函数

【讨论】：