2014-11-22 72 views
0

我已經在這裏問這個問題 Creating next and back button on tabs bootstrap 3 wizard?Bootstrap 3嚮導?

但我現在已經exteded它在最後一個選項卡添加完成,但現在我有問題,除去後退按鈕第一個選項卡,這裏是我的代碼

$('.step-back, .step-next').on('shown.bs.tab', function (e) { 
      currentStep() 
     }) 

     var previousButton = '<a href="#" data-toggle="tab" class="step-back">back</a>'; 
     var nextButton = '<a href="#" data-toggle="tab" class="step-next">next </a>'; 

     $(".wizard-navigation").html(previousButton + nextButton); 

     function currentStep() {  
      var stepsLong = $('.tab-pane').length; 
      var currentVal = $('.tab-pane.active').attr("data-step"); 
      currentVal = parseInt(currentVal); 

      var prev = currentVal - 1; 
      var next = currentVal + 1; 

      if (currentVal == stepsLong) { 
       $(".step-next").html("finish").attr('href', '#step' + next); 
      } 
      else { 
       $(".step-next").html("next").attr('href', '#step' + next); 
      } 

      if (currentVal == 0) { 
       $('.step-back').addClass('hidden'); 
      } 
      else { 
       $(".step-next").removeClass('hidden'); 
      } 


     } 

這裏正在撥弄 http://jsfiddle.net/52VtD/9206/

我需要什麼,如果用戶在第一個選項卡上刪除後退按鈕

這裏是另一個工作小提琴 http://jsfiddle.net/52VtD/9207/

+0

我在那個小提琴中看不到太多東西 - 看起來像是缺少一些標籤的標記。那麼點擊檢查$('.active')。data('index')== 0然後$('。step-back')。隱藏 – 2014-11-22 13:01:20

+0

http:// jsfiddle。淨/ 52VtD/9207/ – 2014-11-22 13:14:00

+0

仍然沒有選項卡 - 我期待這樣的標記http://getbootstrap.com/javascript/#tabs – 2014-11-22 13:17:18

回答

1

http://jsfiddle.net/52VtD/9209/

我在你的步進加入這樣的邏輯:

if(currentVal == 1) $('.step-back').hide() 
      else $('.step-back').show() 

這一個解決您單擊的問題,以及:http://jsfiddle.net/52VtD/9211/

您的問題是,你綁定了.shown,但沒有拋出show事件,我給你的init代碼添加了一個tab(「顯示」)。

+0

Txanks,是代碼問題,你必須clikc兩次 – 2014-11-22 13:32:13

+0

這是否解決了你的問題? – 2014-11-22 15:40:16

+0

Txanks,這太好了 – 2014-11-22 17:48:03