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
Related
I have a menu which is included in file A and B. I don't want any of my tabs to be active at first but after clicking on them I want to set the correct list item's class="active". I thought that the code below would do it. What do I need to add or change?
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#">A</a></li>
<li><a data-toggle="tab" href="#">B</a></li>
</ul>
FYI: I have included the following for the HTML page (do I need anything more than this):
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
http://getbootstrap.com/javascript/#tabs
According to Bootstrap's documentation (under the title "Markup"), you are still missing some HTML.
So this is mostly right, except we need the a link's href to point to an id of your actual tab, and not just a hash mark #.
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">A</a></li>
<li><a data-toggle="tab" href="#tab2">B</a></li>
</ul>
And then we need the actual tabs to be created.
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">...</div>
<div role="tabpanel" class="tab-pane" id="tab2">...</div>
</div>
Hope it helps!
I have a JSP page which uses bootstraps data-toggle="tab" functionality. Upon page load I make one tab active.
<ul class="nav st-nav-tabs">
<li class="active">First Tab</li>
<li>Second Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"></div>
<div class="tab-pane active" id="tab2"></div>
</div>
I have a Highcharts chart on the page, whenever a user clicks on one of the columns I call a JS function which makes tab2 the active tab on the page. Inside this function I've tried a few different commands but none seem to work. I'm quite new to jQuery so I'm hoping someone might be able to point out where I'm going wrong with my syntax.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
First you need to give your tabs an id, i will call it myTabs:
<ul class="nav st-nav-tabs" id="myTabs">
Then you can call and show your tabs by name to show them:
$('#myTabs a[href="#name"]').tab('show');
You can read about tabs in bootstrap's documentation.
I'm trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (code reproduced below).
The cited suggestion to stopPropagation() on the tabs anchors doesn't seem to help. Is there a better way?
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active">Home </li>
<li>Profile</li>
<li>Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
The cited suggestion doesn't work because the .tab('show') method should be invoked on the actual tab (i.e., the link) instead of the tab pane.
So the code should be:
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
Here is an updated fiddle: http://jsfiddle.net/pv2Lc/6/
Use the specific bootstrap events : the hide.bs.dropdown (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling e.preventDefault(). (doc here, list of specific bootstrap events for scrolldown components)
You can activate a special flag when the user clicks on a tab, and check that flag in the hide.bs.dropdown event on the dropdown :
$('#myTabs').on('click', '.nav-tabs a', function(){
// set a special class on the '.dropdown' element
$(this).closest('.dropdown').addClass('dontClose');
})
$('#myDropDown').on('hide.bs.dropdown', function(e) {
if ( $(this).hasClass('dontClose') ){
e.preventDefault();
}
$(this).removeClass('dontClose');
});
fiddle
(I added html ids to your example, change the selectors according to your needs)
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');
I am using the Bootstrap framework through out the entire site for the responsive design ability. I am also using AJAX calls to switch between every page. On one page I am using the Bootstrap tabs to switch between page contents. Everything works perfectly when you are directed to the page through any of the ajax links but if you manually type in the url the tab contents wont change. The tabs themselves will change when you click on them but the content stays on the original content. I originally though it might have something to do with the javascript I'm using so that you can direct the user to a certain tab with a hashtag but it still doesn't work when I remove the code. Here is the code:
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab #1
</div>
<div class="tab-pane" id="tab2">
Tab #2
</div>
<div class="tab-pane" id="tab3">
Tab #3
</div>
<div class="tab-pane" id="tab4">
Tab #4
</div>
</div>
<script>
$(function(){
if (window.location.hash) {
var hash = window.location.hash;
var tab = $('[data-toggle="tab"][href="' + hash + '"]');
tab.show();
tab.tab('show');
}
});
</script>
Can anyone help me with this?
You have to add a listener to the hashchange window event.
You probably opened the page without a hash. At this point, your script was executed. When you change the hash in your adress bar, the page will not be reloaded. So there is no-one to handle that event. For this you have the hashchange event to react to such changes.
See the MDN documentation for more info and examples on this event.
If you are using jQuery, check out this answer.