css - ブートストラップ タブ ペインを左にスライドしますか?

Question

Bootstrap を使用して Photoshop のデザインを HTML に実装しました (bootstrap を使用するのは初めてです)。これは単一ページの Web サイトで、4 つのセクション (実際にはページ) があります。すべてのセクションには、Bootstrap のタブ可能なクラスを使用してタブ パネルに表示した複数のページがあります。すべてのタブにコンテンツを表示するためのスライド効果が必要です。つまり、セクションに 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 -->

ジャバスクリプト

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 デモ