CSS选项卡不能在bootstrap上使用锚点？

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

但这并未将查看者的网址更改为/#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
        });
});

还有一个小小的演示：little link。请注意，不需要使用jQuery;如果你想避免使用它，你可以轻松转换为vanilla JavaScript。

希望有所帮助！