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>
Related
I need to completely destroy Bootstrap tabs. The original markup from Bootstrap docs:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Desired markup after complete destroy is something like this:
<div>
<ul>
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div>
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
</div>
So the goal is to remove all the Bootstrap classes, listeners, etc. Is there a function/method in Bootstrap 3 for that?
Btw, please I am not looking for "solution" like $.removeClass('.nav, .nav-tabs, .tab-pane','#bla'); & $.removeAttr('role','#bla'); etc.
There is no JS function in Bootstrap 3 that does what you want. Checkout their docs http://getbootstrap.com/javascript/. Are you just trying to remove the attributes from the DOM with client-side JavaScript, or permanently change the HTML on the server?
Either way, it sounds like you will need to write some custom code to accomplish your goal, since it is not something commonly done.
Based on Bootstrap 3..... all I want is, the tab switch to 2nd tab after some time interval and stays.
I need jquery/javascript code fix this issue... kindly help me as I'm a newbie, many thanks...!!!
Here is the code of tab section:
<!-- Nav Tabs -->
<ul id="tabsnav" class="nav nav-tabs">
<li class="active">Daily</li>
<li>Weekly</li>
</ul>
<!-- Tab Panels -->
<div style="min-height:400px;" class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-4">
<p>Report Goes Here</p>
</div>
<!-- Tab Content 2 -->
<div class="tab-pane fade" id="tab-5">
<p>2 Report Goes Here</p>
</div>
</div>
<!-- End Tab Panels -->
</div>
</div>
<!-- End Page Content -->
I'm trying to create a simple navbar at the right and pane on the left. Like they have showed in their documentation (section - Tabs on the right).
But the tabs are coming on the top only. Here's the JsFiddle demo
Am i doing anything wrong? Are tabs-right deprecated in new version of bootstrap?
The bootstrap version you are using is Bootstrap v3.3.5.
The documentation you are referring to is Bootstrap v2.0.0.
Use the right version as your code is right.
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="rA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="rB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="rC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/b6zvmfmr/1/
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 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');