Bootstrap tab not working

Question

here is my html

<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#eth0:0" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="eth0:0">h</div>
        <div role="tabpanel" class="tab-pane" id="profile">p</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>
</div>

Why is that my home tab not working? After page reload,the home tab is clicked and its content is shown but after i click on other tabs and then again click on the home tab, it does not work. How can I fix this?

@Daedalus, i think it is valid http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Sushant Bajracharya, Feb 25 '16 at 07:30
@ShoaibChikate, here is the fiddle https://jsfiddle.net/qa8j4cwq/ — Sushant Bajracharya, Feb 25 '16 at 07:31
@SushantBajracharya why dont you try proper href for home tab https://jsfiddle.net/qa8j4cwq/ — Nagaraj S, Feb 25 '16 at 07:36
It is obvious that the `:` inside the `href` attribute is causing the problem. Even if the `:` is an allowed character inside the `href` attribute the position of the occurrence seems to make the difference here. Check out the [RFC3986](http://www.ietf.org/rfc/rfc3986.txt) document describing the URI generic syntax. Take a closer look at *2.2 Reserved Characters* and *3. Syntax Components*. URIs consist of components and the `:` is a generic delimiter, so its position inside a valid URI seems to be important. — DavidDomain, Feb 25 '16 at 08:14

score 0 · Accepted Answer · answered Feb 25 '16 at 07:37

0

This may not be the very best answer but it worked for me.

First of all I removed the ':' from the href and id via regex and now it works.

answered Feb 25 '16 at 07:37

Sushant Bajracharya

400
3
19

Yes, this id is correct according to https://www.w3.org/TR/html5/single-page.html#the-id-attribute . But bootstrap does not seem to work with it. – Beri Feb 25 '16 at 07:50
well I also had to change the href value too – Sushant Bajracharya Feb 25 '16 at 07:56

Bootstrap tab not working

1 Answers1