0

試行 1

<div class="bs-docs-example">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a>aaa</li>
        <li><a href="#">Profile</a>fff</li>
        <li><a href="#">Messages</a>bbb</li>
    </ul>
</div>

JSフィドル

また、属性を「タブ」に設定しようとしdata-toggleましたが、タブ間をクリックすることしかできず、aaa/fff/bbb を別のタブに分割しませんでした。

これは、JavaScript なしで実行できるはずです。

試行 2

私が作業中のものに最も近いのは次のとおりです。

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#ter" data-toggle="tab">Stir</a>
        </li>
        <li>
            <a href="#gin" data-toggle="tab">Drink</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="ter">fff</div>
        <div class="tab-pane" id="gin">ggg</div>
    </div>
</div>

JSフィドル

しかし、これはビューアーの URL を変更し/#terたり/#gin、クリックしたりしませんでした。また、フィドルでは正常に動作しないようです...

4

1 に答える 1

-1

あなたのjsFiddleは期待どおりに動作します - アンカー リンクは と に移動#ginし#terます。一方、実際にアクティブなタブを変更するには、JavaScript を使用する必要があると思います。これは、少しjQueryを使用する試みです:

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#ter" data-toggle="tab">Stir</a>
        </li>
        <li>
            <a href="#gin" data-toggle="tab">Drink</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="ter">fff</div>
        <div class="tab-pane" id="gin">ggg</div>
    </div>
</div>

JavaScript:

$(document).ready(function() {
    $(".nav-tabs li a").click(function() {
            var li = $(this).parent("li");
            var wch = this.getAttribute("href");
            $(li).addClass("active"); //make current li active
            $(li).siblings("li").removeClass("active"); //make others inactive
            $(".tab-content div").removeClass("active"); //make all tabs inactive first
            $(wch).addClass("active"); //activate our tab;
            return false; //don't change URL
        });
});

そしてちょっとしたデモ: little link . jQuery を使用する必要がないことに注意してください。使用を避けたい場合は、バニラ JavaScript に簡単に変換できます。

それが役に立ったことを願っています！

于 2012-08-25T08:42:09.627 に答える