I'm using Twitter's bootstrap and have implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I couldn't find any documentation on how to create a 'next' button. I'd like to create a separate 'next' button to loop through all tabs(e.g: $('#next_tour'), below). Any ideas on how to implement the javascript for this?
aside/comment: I also noticed that fragment identifiers aren't added to the url with the bootstrap solution - which might be nice to have, too. (for that feature it's making me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I'm undecided right now.)
<div class="span11 columns">
<div class="row">
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Raw denim</p>
</div>
<div class="tab-pane" id="sensors">
<p>Food truck.</p>
</div>
<div class="tab-pane" id="encouragment">
<p>Banksy.</p>
</div>
<div class="tab-pane" id="teammates">
<p>biodiesel.</p>
</div>
<div class="tab-pane" id="privacy">
<p>mollit.</p>
</div>
</div>
</div>
</div>
<div class="span1 columns offset11">
<div class="row">
<a id="next_tour" class="button_blue" href="">Next</a>
</div>
</div>
Here's what I came up with, you can alter the only two selectors (a[data-toggle="tab"], ._tabs_navigation) to specify which buttons switch which tabs if you have more than one set:
$(document).ready(function() {
var tabIndex;
var tabs = $('a[data-toggle="tab"]');
tabs.on('shown', function(e) {
tabIndex = $(e.target).closest('li').index();
}).eq(0).trigger('shown');
$('._tabs_navigation').on('click', 'a', function() {
var index = tabIndex + ($(this).index() ? 1 : -1);
if (index >= 0 && index < tabs.length) {
tabs.eq(index).tab('show');
}
return false;
});
})
Markup for buttons, only the class _tabs_navigation is important:
<div class="btn-toolbar clearfix">
<div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio">
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-left icon-white"></i>
</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
Working example:
http://jsfiddle.net/gEn8f/2/
My variant for Bootstrap 3.0 (only Next):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Base tab</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="base">
<p>This is content of Tab 1</p>
Next →
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
Next →
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
tabNext = function(e) {
var nextTab = $(e).attr('href');
$('#myTab a[href="' + nextTab + '"]').tab('show');
}
})
</script>
the answer is here
http://twitter.github.com/bootstrap/javascript.html#tabs
but try the below code
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>This is content of Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>This is content of Tab 4</p>
</div>
</div>
<div>
‹ Prev
Next ›
</div>
<script>
var myTab, myTabsActive, tabNext, tabPrev;
$(function() {
myTabs = $('#myTab li').length;
myTabsActive = 0; //or yours active tab
tabNext = function() {
var index = myTabsActive + 1;
index = index >= myTabs ? 0 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
tabPrev = function() {
var index = myTabsActive - 1;
index = index < 0 ? myTabs - 1 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
});
</script>
Related
I am trying to save to active tab state on page refresh. Currently, I have the following code, however, when I output to console the ui-state-active it gives me back -1 as the value. And it doesn't seem to even register my click() function, cause my console.log in the function never outputs. I believe I am doing something wrong here.
<script language="javascript" type="text/javascript">
$(".tabs").tabs();
var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
console.log("local storage value parseInt: " + tabIndex);
if(tabIndex != null){
console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
$('.tabs > ul > li:nth-child('+ (tabIndex) +')').find('a').click();
}
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
localStorage.setItem('activeTab', curTabIndex);
});
</script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
<?php include("tab_1.html"); ?>
</div>
<div id="tab2" class="tab" >
<?php include("tab_2.html"); ?>
</div>
<div id="tab3" class="tab" >
<?php include("tab_3.html"); ?>
</div>
<div id="tab4" class="tab active">
<?php include("tab_4.html"); ?>
</div>
<div id="tab5" class="tab active">
<?php include("tab_5.html"); ?>
</div>
<div id="tab6" class="tab active">
<?php include("tab_6.html") ?>
</div>
</div>
</div>
What I would recommend doing is inside your click handler, removing the 'active' class to begin with, then affixing it to the clicked element:
$('.tab-links a').click(function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Note that you should only ever have one 'active' class at any one time.
Also be aware that if you are adding your elements dynamically, you will need to hoist the scope and utilise event delegation. In this case, replace $('.tab-links a').click(function(e) {}) with $(document).on("click", ".tab-links a", function(e) {}):
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Hope this helps! :)
Here you go with a solution https://jsfiddle.net/dhynozb5/2/
$("#tabs").tabs();
var currentTab = $('.ui-state-active a').index();
if(localStorage.getItem('activeTab') != null){
$('#tabs > ul > li:nth-child('+ (parseInt(localStorage.getItem('activeTab')) + 1) +')').find('a').click();
}
$('#tabs > ul > li > a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
localStorage.setItem('activeTab', curTabIndex);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
tab_1.html
</div>
<div id="tab2" class="tab" >
tab_2.html
</div>
<div id="tab3" class="tab" >
tab_3.html
</div>
<div id="tab4" class="tab active">
tab_4.html
</div>
<div id="tab5" class="tab active">
tab_5.html
</div>
<div id="tab6" class="tab active">
tab_6.html
</div>
</div>
</div>
Highlighting an active tab after page refresh I've used localStorage.
Hope this will help you.
Either move your entire <script></script> block below the html or do the following:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".tabs").tabs();
var currentTab = $('.ui-state-active a').index();
console.log("hi");
console.log("this is the currentTab value: " + currentTab);
$('.tablinks a').click(function(e) {
console.log("i am in here");
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
console.log(curTabIndex);
});
});
</script>
I have my page built up like a navigation bar and below that i have in-page tabs, which are showing different content, but i can't get it to show only one of them at load.
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
and now i want the page to show "tab1" when it's loading the first time, how do i do that?
my JS:
<script>
jQuery(document).ready(function () {
jQuery('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tab' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});`enter code here`
});
</script>
Using JQuery:
$(document).ready(function () {
$(".tab-pane").removeClass('active');
$("#tab1").addClass('active');
});
If you tab HTML is like this
<div class="tabs-container">
<div class="tab-content">
<div id="tab1" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
<div id="previewTemplate" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
</div>
try this:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
e.preventDefault();
// Show/Hide Tabs
var parentLi = $(this).parent();
jQuery('.tabs .tab-links li').not(parentLi).hide();
// Change/remove current tab to active
//jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
I have tried using this thread, but I can not get it to work for me. When I use this script, it hides the tab whether there is a "p" tag or not. What am I doing wrong?
<div id="product-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="active">Description<div class="active-border"></div></li>
<li class="border-none">Features & Specs<div class="active-border"></div></li>
<li>Warranty<div class="active-border"></div></li>
<li class="reviews-tab">Expert Reviews<div class="active-border"></div></li>
<div class="clear"></div>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div id="product-description" class="rte">
<div class="">{{ product.description }}</div>
<div class="">{{ product.metafields.custom_fields.ProductFeatures }}</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div id="product-description" class="rte">
{{ product.metafields.custom_fields.ProductMoreInfo }}
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div id="product-description" class="rte">
{{ product.metafields.custom_fields.Warrantee }}
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div id="product-description" class="rte">
{{ product.metafields.custom_fields.ExpertReviews }}
</div>
</div>
Here is the script I borrowed from the other thread and modified for my needs. Any help would be appreciated!
<script>
// for each tab link
$('li.reviews-tab a').each(function() {
// does it's related div (by content id) not have a p element?
if ($('#tab4' + $(this).data('content-id') + ' > p').length == 0) {
// if not, find the link's parent li element and hide it
$(this).parent('li.reviews-tab').hide();
}
});
</script>
If I understand the comments of your javascript correctly, you will need something like this instead.
// for each tab link
$('#product-tabs a').each(function() {
// does it's related div (by content id) not have a p element?
if ($('#' + $(this).data('content-id')).has('p').length == 0) {
// if not, find the link's parent li element and hide it
$(this).closest('li').hide();
}
});
I've got bootstrap tab with following code:
Fiddle
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
<hr />
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu11" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
and JS
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
how to make it work in that way, after clicking one link - content of two DIVS will be changes? i was looking for info how to point not the ID but class, so far without sucess.
I created a jsfiddle http://jsfiddle.net/an0r4buk/1/ to showcase what you're trying to achieve.
$('.nav-tabs a').click(function () {
$(this).tab('show');
$("<a>").data("target", $(this).data("second-tab")).tab("show")
})
Bootstrap toggles one tab at a time, that's why I create a new anchor element and set it's target to the second tab you want to show.
I modified your HTML like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a>
</li>
<li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a>
</li>
</ul>
The href attribute is used for the first tab (home/home1), the data-second-tab toggles the second tab.
try this http://jsfiddle.net/serGlazkov/an0r4buk/2/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $previousActiveTab = $(e.relatedTarget);
var $newlyActiveTab = $(e.target);
var other = $previousActiveTab.attr('href') + '1';
var other1 = $newlyActiveTab.attr('href') + '1';
$(other).removeClass('active in');
$(other1).addClass('active in');
})
Mark your second div.tab-content with id="tab-content2" then the following code will do the trick:
$('.nav-tabs a').click(function(){
$(this).tab('show')
var name = $(this).attr('href').substr(1)
$('#tab-content2').children().each(function(el) {
if (name + '1' === $(this).attr('id')) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
})
})
Using Twitter Bootstrap's bootstrap-tab.js, I have:
<ul class="tabnavcenter" id="myTab">
<li class="active">about</li>
<li>education</li>
<li>experience</li>
<li>verified skills</li>
<li> video</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
How can I get it so if I put:
<div class="tab-content">
<div class="tab-pane active" id="home">Content 2</div>
</div>
... two places in the profile (once above and once below a navbar) and with different content in each, it would work? As of now, the content appears, but once its clicked, it disappears. Can there be two "active" li's at the same time?
Edit:
Since I'm using this in a Rails 3.2 App, I currently have the following in bootstrap-tab.js:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a[href="#home"]').tab('show');
$('#myTab a[href="#tab2"]').tab('show');
$('#myTab a[href="#tab3"]').tab('show');
$('#myTab a[href="#tab4"]').tab('show');
$('#myTab a[href="#tab5"]').tab('show');
$('#myTab a[href="#home2"]').tab('show');
$('#myTab a[href="#tab22"]').tab('show');
and after putting the following in user_body.html.erb:
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
... I get the second content in the div after refreshing the page, no change when I click on the second tab, and then a change back to the name of the first 'a' when I click back on the first one.
It's a mess.
Here is one solution without extra javascript, and compatible with the plugin API.
The principle is to use 2 .tab-content and take advantage of the data-target selector attribute.
HTML
The first .tab-content contains your normal .tab-pane
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab">profile</div>
<div class="tab-pane messages-tab">messages</div>
<div class="tab-pane settings-tab">settings</div>
</div>
and the second .tab-content contains the extra .tab-panes that are optionnal - plus an empty one (#notab_else here)
<div class="tab-content">
<div class="tab-pane active" id="home_else">home_else</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>
Then you have your tabs with one extra attribute, data-target :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li class="">Class Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
This attribute data-target defines the .tab-pane(s) associated with it. The magic is that you can use #ids or .classes or any valid jQuery selector.
JavaScript
All you need to activate everything is the default code :
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
And you can also use your own actions to trigger the tabs as defined by the API.
You do not need that if you keep the default behavior for tabs.
$('#myTab a:first').tab('show');
EXTRA
You can be free of any javascript if you set data-toggle="tab" to the a elements
There is a fade effect available if you add the fade class to the .tab-pane (and fade in for the .active one)
DEMOS
Here is the demo (jsfiddle) and the demo with extra (jsfiddle)
you can only access one id at a time, this is why it is called an id.
Get the content from the first one and apply it to the second one.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$(this.href +'2').html($(this.href).html()
})
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2">Content 2</div>
</div>
Here is a working solution for your problem (updated):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
<div class="tab-pane active" id="home2">Home Content 2</div>
<div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tab-content2 div").each(function(i, e){
if(!$(e).hasClass('active')) $(e).hide();
});
$('#myTab>li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
$("#tab-content2 div").each(function(i, e) {
$(e).hide();
});
$(this.getAttribute('href') + "2").show();
});
});
</script>
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$('#extendedView').html($(this).html());
});
});
</script>
<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">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="extendedView">Content 2</div>
OR
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
</script>
<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">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2"></div>
<div class="tab-pane" id="profile2"></div>
<div class="tab-pane" id="messages2"></div>
<div class="tab-pane" id="settings2"></div>
</div>