css - CSS选项卡不能与引导程序上的锚一起使用？

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属性设置为“选项卡”，但这只允许我在选项卡之间单击，它没有将 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单击时。而且它似乎在小提琴中无法正常工作......

Answer 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
        });
});

还有一个小演示：小链接。请注意，不需要使用 jQuery；如果你想避免使用它，你可以很容易地转换为 vanilla JavaScript。

希望有帮助！