CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3tabs
Tvde1
Tvde1

Reputation: 1284

Bootstrap tab doesn't switch

I'm making a little page containing bootstrap tabs to switch between chat windows. I think I've correctly followed the example, but this won't work:

<div class="container">
    <ul class="nav nav-tabs" id="navbartabs">
        <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
        <li><a data-toggle="tab" href="#chat-patient+email.com">Patient, Peter</a></li>
    </ul>
    <div class="tab-content" id="tabcontent">
        <div id="placeholder" class="tab-pane active">
            Placeholder
        </div>
        <div id="chat-patient+email.com" class="tab-pane">
            <ul id="content-patient+email.com"></ul>
            <input id="input-patient+email.com"><button id="send-patient+email.com">Send</button>
        </div>
    </div>
</div>

I can use the nav tab buttons and they do get the visual effect, byt the tab contents don't switch around the active class.

If I edit the source on the webpage, I can make the second tab show up by adding the active class and removing it from the placeholder tab.

JSFiddle

Upvotes: 0

Views: 1093

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

Using an id that contains "." or "+" causes a problem with the jQuery selector. You need to escape the tab selector like this...

data-target="#chat-patient\+email\.com"

<ul class="nav nav-tabs" id="navbartabs">
    <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
    <li><a data-toggle="tab" href data-target="#chat-patient\+email\.com">Patient, Peter</a></li>
</ul>

https://jsfiddle.net/5aqtqLv0/

Or, just remove the + and . from the id.

    <ul class="nav nav-tabs" id="navbartabs">
        <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
        <li><a data-toggle="tab" href="#chat-patient">Patient, Peter</a></li>
    </ul>

https://jsfiddle.net/yun3Lzsk/

Upvotes: 1

Related Questions