2

Twitter Bootstrap 3.0.1 のタブ コンテンツとナビゲーション タブを使用しています。ユーザーがタブをクリックする代わりに次へをクリックできるように、タブのコンテンツに次のリンクがあり、それらの次のボタンを使用した後、正しいタブが押された状態で表示されるようにします。

リンクを取得したときに、li アクティブ クラスが追加されていないため、タブが押された状態で表示されないことに気付きました。この JavaScript を機能させるためにまとめましたが、もっと簡単な方法があると思いますか?

ドム:

<ul class="nav nav-tabs">
    <li class="active"><a href="#cardType" data-toggle="tab">1) Select a package</a></li>
    <li><a href="#address" data-toggle="tab">2) Address package</a></li>
    <li><a href="#amount" data-toggle="tab">3) Specify Gift Amount</a></li>
    <li><a href="#pay" data-toggle="tab">4) Pay</a></li>
</ul>

<div class="tab-content">
        <div class="tab-pane active" id="cardType">
            <a href="#address" data-toggle="tab">Next</a>
        </div>
        <div class="tab-pane" id="address">
        </div>
        <div class="tab-pane" id="amount">
        </div>
        <div class="tab-pane" id="pay">
        </div>
</div>

次のリンクがクリックされたときにタブを押す JavaScript は次のとおりです。

$(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab

        var targetTab = e.target.href.split('#')[1];
        console.log(targetTab);
        $(".nav-tabs a").parent().removeClass('active');
        $(".nav-tabs a[href=#" + targetTab + "]").parent().addClass('active');
    });
});

私も .show を使用してみましたが、それは私にとって正しいタブを押し下げません。多分私は何か間違ったことをしていますか？

$(document).ready(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                e.target // activated tab
                e.relatedTarget // previous tab

                var targetTab = e.target.href.split('#')[1];
                $('#myTab a[href="' + targetTab + '"]').tab('show');
            });
        });
4

2 に答える 2

4

解決策を見つけたら、JS を次のように変更します。

$('a[data-nexttab]').on('click', function () {
    var id = $(this).data('nexttab');
    $('.nav-tabs li:eq(' + id + ') a').tab('show');   
});

そして次のボタン HTML へ:

<!-- Note that the id is 0-indexed -->
<a href="#address" data-nexttab="1">Next</a>

JSFiddle

アップデート

タブのセットが複数ある場合、これは壊れるため、JS を次のように変更できます。

$('a[data-nexttab]').on('click', function () {
    var id = $(this).data('nexttab');
    $(this).closest('.tab-content')
           .siblings('.nav-tabs')
           .find('li:eq(' + id + ') a')
           .tab('show');   
});

jsフィドル

于 2013-11-02T11:46:18.400 に答える
0

jquery と bootstrap.js ファイルを含める場合、カスタム JavaScript は必要ありません。

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

デモ:フィドル

于 2013-11-02T11:38:44.197 に答える