Bootstrap選項卡窗格向左滑動？

Question

我已經使用Bootstrap將HTML設計實現爲HTML（我第一次使用Bootstrap）。這是一個單頁網站，有4個部分（實際上是網頁）。每個部分都有多個頁面，我使用Bootstrap的tabbable類在「Tab」面板中顯示了這些頁面。它工作正常，我想爲每個標籤顯示其內容的滑動效果。意思是，如果某個部分包含3個標籤，並且我點擊第2個標籤，則下一個標籤的內容顯示爲滑動效果。是否只添加班級名稱？ 謝謝。

Answer 1

我覺得這是它

<div class="container"> 
    <div class="row"> 
     <div id="tab-container" class="span6 offset1"> 
     <ul class="nav nav-tabs" id="myTab"> 
       <li class="active"><a href="#options" data-toggle="tab">Options</a></li> 
       <li class="disabled"><a href="#information" data-toggle="tab">Information</a></li> 
       <li class="disabled"><a href="#payment" data-toggle="tab">Payment</a></li> 
      </ul> 

      <div class="tab-content"> 
       <div class="tab-pane active" id="options"> 
        <div class="well"> 
        <form id="frmtype1" action="" name="frmtype1" method="post"> 
         <fieldset> 
          <legend>Registration Options</legend> 

          <label for="Reg_type1" class="radio"> 
          <input type="radio" name="Reg_type" id="Reg_type1" value="1"/> 
         Registering myself with credit card or bank account 
         </label> 
         <br> 
         <label for="Reg_type2" class="radio"> 
          <input type="radio" name="Reg_type" id="Reg_type2" value="2"/> 
         Registering multiple people using credit card or bank account 
         </label> 
         <br> 
         <label for="Reg_type3" class="radio"> 
          <input type="radio" name="Reg_type" id="Reg_type3" value="3"/> 
         Registering using a purchase order 
         </label> 
         </fieldset> 
           <button class="btn-demo btn" data-activate="#information">Continue</button> 
         <span class="help-inline" style="display:none;">Please choose an option</span> 
        </form> 
        </div><!--/.well --> 
       </div> 
       <div class="tab-pane" id="information"> 
        <div class="well"> 
        <form name="everything" id="frmtype2" action="" method="post"><p>Some content to give this pane a little bit of bulk</p> 
         <button class="btn-demo btn" data-activate="#payment" type="submit">Continue</button> 
        </form> 
        </div><!--/.well --> 
       </div> 
       <div class="tab-pane" id="payment"> 
        <div class="well"> 
        <p>Some content for the 3rd pane.</p>  
        </div><!-- .well --> 
       </div> 
      </div> 
     </div><!-- /.row --> 
    </div><!-- /#tab-container --> </div><!-- /.container --> 

JAVASCRIPT

var selector; 
var selectorID; 

activateTab('#myTab a:first'); 

function activateTab(selectorID) 
{ 
    $(selectorID).tab('show') 
     .closest('.disabled').removeClass('disabled');  
} 

function deactivateTab(selector) 
{ 
    $(selector).off('click.twbstab') 
     .closest('li').addClass('disabled'); 
} 

$('.btn-demo').on('click',function() { 
    selector = '#myTab a[href="'+$(this).data('activate')+'"]'; 
    selectorID = $(selector).attr('href'); 
}); 

var val1 = $('#frmtype1').validate(
{ 
    errorPlacement: function(error, element) {}, 
    // prevent the standard error message from showing, rather you use the inline-text 
    rules: { 
     'Reg_type': { 
      required: true 
     } 
    } 
}); 

// validate 1st form 
$('#frmtype1').submit(function(e) 
{ 
    // validate the first page 
    if(val1.form()) { 
     $('.help-inline').hide(); 
     activateTab(selector); 
    } else { 
     $('.help-inline').show(); 
    } 
    return false; 
}); 

// validate 2nd form 
$('#frmtype2').submit(function(e) 
{ 
    // validate the second page 
    activateTab(selector); 
    return false; 
}); 


// if 2nd or 3rd tab is clicked, validate as if the form was submitted 
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e) 
{ 
    selectorID = $(this).attr('href'); 
    // validate the first page 
    if(val1.form()) { 
     $('.help-inline').hide(); 
     activateTab(this); 
     $(selectorID).tab('show'); 
    } else { 
     $('.help-inline').show(); 
    } 
    return false; 
}); 

// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect 
$(".tab-pane").css("position", "relative"); 
$(".tab-pane").not(".active").animate({ 
    left: "1000px" 
}); 

// perform slide effect 
$('a[data-toggle="tab"]').on('show', function (e) { 
    lastPane = $(e.relatedTarget).attr('href'); 
    $(lastPane).animate({left: "1000px"}, 300) 
    currPane = $(e.target).attr('href'); 
    $(currPane).animate({left: "0px"}, 300); 
});  

JSFidle DEMO