I am using this tabbed menu with twitter bootstrap.
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I can go to the next tab by clicking on it, I want to find out if i can add a link/button and visit the next tab from the previous tab.
check out my jsfiddle: http://jsfiddle.net/L6bf7nvc/
Be sure to check that you included your jquery.js before your bootstrap.js
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
version: jquery 2.1.0 and bootstrap 3.2.0
According to the Bootstrap Tabs documentation you can do it with Javascript:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<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>
<script>
$(function () {
$('#myTab a:last').tab('show');
})
</script>
You need only to create a link to that function, or if using unobtrusive JavaScript, create an event handler catching the 'click' on the link. Check this answer if you need more information about it.
SEE this DEMO
DEMO
js
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a:last').tab('show');
Related
I have been reading about bootstrap tabs from their official documentation. The markup suggested is as:
<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>
On tabpanels bootstrap doesn't use aria-labelledby attribute. but here in the step 2 they are using aria-labelledby on tabpanel. So my question is:
Should I use aria-controls with aria-labelledby in bootstrap tabs for making it better for screen readers?
I am doing a project in AngularJS with Bootstrap 3. Currently, I have three navs with their respective id's as shown below:
<div class="tab">
<ul class="nav nav-pills">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<h4>The Markup</h4>
<pre>Code here ...</pre>
</div>
<div id="pane2" class="tab-pane">
<h4>Pane 2 Content</h4>
<p> and so on ...</p>
</div>
<div id="pane3" class="tab-pane">
<h4>Pane 3 Content</h4>
</div>
</div>
</div>
When panel1 is clicked, it should show the contents related to panel1. similarly to other two. But when that link is clicked, it will redirect to home page.
I would like to use this code I found from Zurb Foundation documentation. Unfortunately, the tabs are laid out horizontally. I need them like this -
Here is the tab code from Zurb Foundation and the link to it as well
http://foundation.zurb.com/docs/components/tabs.html#tabs-deeplink-2
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Tab 1</li>
<li class="tab-title" role="presentational" >Tab 2</li>
<li class="tab-title" role="presentational">Tab 3</li>
<li class="tab-title" role="presentational" >Tab 4</li>
</ul>
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
<h2>Fourth panel content goes here...</h2>
</section>
</div>
If you use a max width on the .tabs it should work just fine.
.tabs {
max-width: 300px;
}
Because the tabs inline and float: left the max-width will constrain them and make them go down vertically.
Working example: http://codepen.io/nathanw/pen/zxgjrO
How can I close all Bootstrap tabs at once?
I need to have all tabs closed at start, then use it as usual, but if some tab is open and I click again it will close - same as Bootstrap accordion functionality.
Code is same as on Bootstrap page:
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane in 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>
Fisrt tab is always open. When I remove active class it doesn't work correctly.
I have a html page as B.html with tab navigation. I made tabs tabbable in my html page as below.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I have another html page as A.html. In A.html page, there are 2 a tags as T1 and T2. When i click T1, i need to redirect to B.html and show content own to Tab 1 and When i click T2, i need to redirect to B.html and show content own to Tab 2.
I have tried as below.
T1
T2
But this not worked. it always select tab1. How can i solve this ?
You can make use of javascript/jquery for this, read the hash value and open desired tab:
Markup:
<div class="tabbable">
<ul class="nav nav-tabs" id='my_tab'>
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
JQUERY:
var tabs = $("#my_tab");
if (window.location.hash === '#tab1') {
$('#my_tab a:first').tab('show');
}
else if(window.location.hash === '#tab2') {
$('#my_tab a:last').tab('show');
}
The above is very general code, can be optimize as per your need.