Bootstrap tabs - point two tabs same time - javascript

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')
}
})
})

Related

Find active submenu and remove its class

I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/
Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/
Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>
You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/

bootstrap tabs inside a dropdown closing when clicked

Hello i have a Dropdown with tabs inside whenever i'm clicking certain tabs inside it. it closes but the content inside the tabs that i clicked is changing so it works. but the problem is it closes. i have to make it stay so the user will be able to click each tabs without closing and i use javascript to open the dropdown and use the
e.stopPropagation();
the tabs #href are working and it's not closing but the content is not changing.
here's my code.
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist" >
<li class="active">Cars</li>
<li>Vans & Pickup</li>
<li>SUVs & Crossover</li>
<li>MPVs</li>
<li>Hybrid</li>
<li>Performance</li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
00. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="vans" role="tabpanel">
0. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
1. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
2. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="mpv" role="tabpanel">
3. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="hybrid" role="tabpanel">
4. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="performance" role="tabpanel">
5. SOME ITEM w IMAGE / LIST HERE
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</nav>
Here's the javascript. and btw i use bootstrap 4 alpha 6 here.
$('.dropdown-menu').on('click.bs.dropdown', function (e) {
e.stopPropagation();
e.preventDefault();
}
i found the solution here Bootstrap jQuery Tabs are not working in Dropdown
$( document ).ready(function() {
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$('.dropdown-menu > ul > li > a').on('click', function(event){
event.stopPropagation();
$(this).tab('show')
});
});
by user Deep

Simple Tab switching using custom javascript function

I want to custom function too for switch between tabs when clicked on Next button,
I did something like this,this code add the active class into "li" but not show the data under that tab.
How I can do this?
function goNextTab(currtab,nexttab)
{
var curr = $('li.active');
curr.removeClass('active');
curr.next().addClass('active');
$('#'+currtab).attr('aria-expanded', 'false');
$('#'+nexttab).attr('aria-expanded', 'true');
}
<ul id="myTab" role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">Customer
</li>
<li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="job" href="#job" aria-expanded="true">Job</a>
</li>
<li role="presentation">Schedule
</li>
</ul>
<!-- Tab panes-->
<div class="tab-content">
<div id="customer" role="tabpanel" class="tab-pane active">
<button onclick="goNextTab('customer','job')" type="button"> Next</button>
</div>
<div id="job" role="tabpanel" class="tab-pane">
<button onclick="goNextTab('job','schedule')" type="schedule"> Next
</div>
<div id="schedule" role="tabpanel" class="tab-pane">
</div>
</div>
This is how I did it:
curr.removeClass('active');
if (curr.is("li:last")) {
$("li:first-child").addClass('active');
} else {
curr.next().addClass('active');
}
Have a look at the JSFiddle here
1.Remove onclick functions onclick="goNextTab('customer','job')"
2.Bootstrap will automatically takes from href
3. href id and div id should be same
Hope i works..
I suggest to use this:
$("#tabYouSwitchTo").tab('show');
Here is an example:
http://bl.ocks.org/kiranml1/6956013

How to return content to two separate tabbable ID's upon one tab click using Twitter Bootstrap's Tabbable Tabs in a Rails 3.2 App

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>

trying to implement a 'next' button using twitter bootstrap-tabs.js

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>

Categories