I have several tabs and sub tabs underneath #tab1.
<ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;">
<li id="tab1"></li>
<li class="active" id="tab2"></li>
<li id="tab3"></li>
</ul>
<div id="tab-content" class="tab-content">
<div id="tab1-tab" class="tab-pane fade scrollable">
<ul class="nav nav-pills">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div id="subtab-container">
<div id="subtab-tab-content" class="tab-content">
<div id="first-subtab" class="tab-pane in active fade"></div>
<div id="second-subtab" class="tab-pane fade"></div>
<div id="third-subtab" class="tab-pane fade"></div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane in active fade">
<table id="table2" class="table table-condensed"></table>
</div>
<div id="tab3" class="tab-pane fade">
<table id="table3" class="table table-condensed"></table>
</div>
Right now, I have a couple sets of data, when you select one set, it loads all the tabs with data. When you select another set, it updates all the tabs with the new data.
When it loads, I have #Tab2 as the main default active tab. When I click #tab1, I want #first-subtab to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data.
For example, I load data, it defaults to #tab2, and I click #tab1 -> third-sub tab. When I load another set it defaults to #tab2, I click #tab1-> INSTEAD OF GOING TO #first-subtab, IT GOES TO #third-subtab because I clicked it last.
I've tried to set the #first-subtab to default with the following:
$('#tab1').click(function(){
$('#third-tab').removeClass('li.active');
$('#first-tab').addClass('li.active');
});
I've also tried to show/hide accordingly, but nothing will force the #first-subtab to be default... Any suggestions?
My complete html is 197 lines. When I use the google developer tools, and I've clicked on #first-subtab, the one that I want to be active, it's under the following:
html -> body -> div.layout.layout-vertical -> div#views.visible -> div#table-container.fill -> div#tab-content.tab-content -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a
To get the first sub tag active
Try:
$('#tab1').click(function(){
$('.nav-pills li').removeClass('active');
$('.nav-pills li:first').addClass('active');
});
And use Guli's Suggestion to fix your tabs.
Look at Guli's fiddle for a merge of our two answers.
Your a tag has a href value to #tab2-tab :
<li class="active" id="tab3"></li>
And you div has a bad ID value (not the same that the anchor) :
<div id="tab3" class="tab-pane fade">
Fix the ID of div like this
<div id="tab3-tab" class="tab-pane fade">
and it will work perfectly.
Same thing for #tab2.
If add the answer of #Trevor it will be perfect for your needs.
JSFiddle Demo including Trevor point !
Thanks to Trevor's answer I was able to find the solution that worked for my code:
First, I had to add an id to my ul of my subtabs:
<ul id="subtabsID" class="nav nav-pills">
Then I used this to make the first-subtab the default subtab.
$("#subtabsID > .active").removeClass('active');
$("#subtabsID > :nth-child(1)").addClass('active');
$('#first-subtab').addClass('active in');
Related
My Bootstrap Tabs are working fine but the URL is built wrong like below. I checked many Sites and mine is definitly wrong.
If I am at http://domain.com/blog it shows me:
http://domain.com/#vote
instead of
http://domain.com/blog/#vote
If the Javascript has loading problems it should still go to the Anchor and not to the URL.
My HTML
<div class="nav nav-tabs" role="tablist">
<a href="#vote" aria-controls="vote" role="tab" data-toggle="tab">
{lang key="Votes" section="global"}
</a>
</div>
<div role="tabpanel" class="tab-pane" id="vote">
Votes
</div>
Javascript
// Tabs
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
If this is all your HTML markup, then you are using an incorrect HTML structure. according to the documentation for javascript bootstrap tabs.
I have tested the following on my own localhost, and your example as well. With the official version there is no issue, while what you have copied above had a broken styling and it did not properly work.
Example
<!-- start container for tabs, required -->
<div role="tabpanel">
<!-- Nav tabs menu, required -->
<ul class="nav nav-tabs" role="tablist">
<!-- repeat the row below for extra menu items, 3x used in example -->
<li role="presentation" class="active">Tab1 title</li>
<li role="presentation">Tab 2 title</li>
<li role="presentation">Tab 3 title</li>
<!-- close tabs menu -->
</ul>
<!-- start tab content panes container. do not forget this, required -->
<div class="tab-content">
<!-- repeating content pane. make sure that the id="xxxx" matches the href from the menu item -->
<div role="tabpanel" class="tab-pane active" id="tab1">tab 1 content</div>
<div role="tabpanel" class="tab-pane" id="tab2">tab 2 content</div>
<div role="tabpanel" class="tab-pane" id="tab3">tab 3 content</div>
<!-- close tab content panes -->
</div>
<!-- close container for tabs -->
</div>
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I use bootstrap to display 2 tabs like so:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">CLient</li>
<li role="presentation">Pro</li>
</ul>
<div class="tab-content" style="width:100%;">
<div role="tabpanel" class="tab-pane fade in active" id="home">Client Dashboard</div>
<div role="tabpanel" class="tab-pane fade" id="profile">Pro Dashboard</div>
</div>
Instead of the nav-tabs, I would like a toggle button to switch between them like this one:
http://abpetkov.github.io/switchery/
How can i do that ?
You can dynamically select the tab you want to be active with the bootstrap jQuery plugin. So add a click handler to the switch toggle button and select the tab based on the state of the toggle button.
http://getbootstrap.com/javascript/#tabs
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I am using bootstrap and I have a page that is causing me trouble when I use the Tab plugin. The tab body is getting pushed down about 400px below the actual tabs. It is only happening on this one page, most of the other pages are very similar and use the same tab plugin but they are not causing as much problems.
Tab Code:
<ul class="nav nav-tabs">
<li class="active">Entire Asset</li>
<li>Entire Site</li>
<li>Single Service</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="entireAsset">
<p>Hello tab 1</p>
</div><!--End Entire Asset tab-->
<div class="tab-pane" id="entireSite">
<p>Hello tab 2</p>
</div>
<div class="tab-pane" id="singleService">
<p>Hello tab 3</p>
</div>
</div>
jsFiddle: http://jsfiddle.net/f2TG8/
My css and all resources are in the JSFiddle.
There is a problem with the class .nav who has :after and :before styles that creates such white space. You can add this to your css:
.nav {
overflow:hidden;
}
View the demo http://jsfiddle.net/f2TG8/2/