CSS 选项卡不能在 Bootstrap 上使用 anchor ？

Question

尝试 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>

JSfiddle

我也曾尝试将 data-toggle 属性设置为“tab”，但这只允许我在选项卡之间单击，它没有将 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>

JSfiddle

但这并没有在点击时将查看器的 URL 更改为 /#ter 或 /#gin。而且它似乎在 fiddle 中不能正常工作......

Answer 1

你的 jsFiddle按预期工作—— anchor 链接将您带到 #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。

希望对您有所帮助!