在選項卡bootstrap 3嚮導上創建next和back按鈕？

我試圖創建一個簡單的向前和後退按鈕，通過數據ATTR顯示自舉3個標籤在選項卡bootstrap 3嚮導上創建next和back按鈕？

這裏是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>

但在最後一個標籤我必須顯示完成下一步，這是某種嚮導，我已經嘗試引導向導，但我不工作在3.3 :(

來源

2014-11-21 Miomir Dancevic

步數是相同的還是動態的？ – MattD 2014-11-21 18:30:21

這很好，如果有人添加新的標籤窗格，自動下一步和回去的工作，並在第一步不顯示回來？ – 2014-11-21 18:32:34

現在，您可以使用Bootstrap嚮導插件。 http://www.panopta.com/2013/02/06/bootstrap-application-wizard-2/ – MattD 2014-11-21 18:34:28

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); 
}

事件shown.bs.tab - 在標籤上顯示此事件後一個選項卡已被證明LINK
attr（）函數n設置新的href值LINK

來源

2014-11-21 22:51:08 dm4web

在選項卡bootstrap 3嚮導上創建next和back按鈕？

回答

相關問題