CSS tabs not working with anchors on bootstrap?

Attempt 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

I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.

This should be possible to be done without any JavaScript.

Attempt 2

The closest I've gotten to a working one is:

<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

But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...

Answers


Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of 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
        });
});

And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.

Hope that helped!


Need Your Help

SQLite Connection Opens but Can't Read Data, Code Execution Stops

c# .net sqlite connection command

I've been at this for a couple of days ladies and gentlemen and I can't figure it out. I have an application where I open a connection to a SQLite DB and select some data out of a table. The conn...

Permission Denial: reading com.android.providers.contacts.CallLogProvider

android exception permissions

I'm getting this exception on a specific phone and carrier: Samsung Galaxy S3 on Verizon. I've tested in an Evo with Sprint and a Galaxy Nexus with AT&amp;T and none give me this error. I'm wonderi...