css - Bootstrap 选项卡 Pane 向左滑动？

Question

我已经使用 Bootstrap 将 Photoshop 设计实现到 HTML 中(我第一次使用 Bootstrap)。这是一个单页网站，有 4 个部分(实际上是页面)。每个部分都有多个页面，我已经使用 Bootstrap 的 tabbable 类在选项卡面板中显示了这些页面。它工作正常，我想要每个选项卡的滑动效果来显示它的内容。意思是，如果一个部分包含 3 个选项卡并且我单击第二个选项卡，则下一个选项卡的内容显示为滑动效果。是否只有类名可以添加？谢谢。

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