Question

I have seen numerous questions generally touching this subject, I know exactly what needs to be done but I’m not “fluent” with jQuery therefore, I cannot successfully do this.

 <ul class="nav nav-pills" id="activate">
    <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="active"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
 </ul>

 <div class="tab-content">
     <div id="tab1"><h1>Data for Tab 1</h2></div>
     <div id="tab2">
         <a href="#tab1" rel="taburl" data-toggle="tab">Take me to tab content #1</a>
     </div>

Ideally, the data of that tab is switched to #tab1, however, the tab will not switch to active class on the href="#tab1" (stays active on #tab2 but displays the data from #tab1)

I figured I could use the .first() method and target the first occurrence of href="#tab1 and .addClass('active') to this li. But I do not know how to select the li for anylink I link to it to directly target that href ID

I really do not know if this can be done. Can I inject the href data from the link (with jQuery) then add it to the tab link and make it active.

And again, the data-toggle="tab" switches to the right content but will not update the active tab on the navbar,

so is there a way to select that exact ‘tab’ and .addClass('active') to the <li> once I’ve fired the link.

Thank you for your time.

JSFIDDLE EXAMPLE

http://jsfiddle.net/epiceon/M6NQJ/1/

Answer 1

If you switch between tabs like that you’re going to need to call tab('show') again on the tab you intend that button to go to.

On a side note, you should consider updating your version to 2.0.3 if you’re using tabs. They fixed a few bugs (mostly with tabs on the left or right) but even dropping in the new navs.less file might save you a headache down the road.