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.
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.
I have encountered something similiar when trying to manually close a tab within itself.
Heres the working jsFiddle:
Note that i just copypasted from my project. So the solution might not be the cleanest for your problem but you will get how it works. Remember to name the Tab-Buttons and the Button within Tab 3.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.