Next tab shows content but tabs don't follow - javascript

I have 2 tables separated with two tabs.
Active and Inactive
Let's say I click a next button from the active tab. The content of the inactive tab shows but the active tab is still the Active tab. Am I missing something?
Lets say their corresponding IDs are #Active and #Inactive. This is the code of the next button:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>

From your code i guess that you're using bootstrap tabs so you should add click event in your JS code to detect the click on next button and send you to the second tab.
Hope this helps.
$('.next').click(function () {
$('#myTabs a[href="#inactive"]').tab('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class='container'>
<!-- Nav tabs --><br>
<ul class="nav nav-tabs" id='myTabs' role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="acitve">
table 1
</br>
<button class="btn next">Next</button>
</div>
<div role="tabpanel" class="tab-pane" id="inactive">
table 2
</div>
</div>
</div>

Related

Calling out a specific navtab

so i try to href links with specific table IDs so that when the link is opened the specific table id called will be the active tab opened( ie. www.gohome.com/html#profile). but no matter what i do the active tab still remains stagnant and specifically calling out tab id's dont seem to do anything.
This is my code:
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">me </li>
<li role="presentation">you</li>
</ul>
im starting to think it cant be done without me implementing some sort of script. but im not that good at coding. any form of help will be great. thanks n advance.
The trick in your case may be your references. You need to add JavaScript references for jQuery and bootstrap.js at the top of your html. That is what is doing the magic behind the functionality of showing and hiding different content based on the clicked tab.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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"/>
Here's a full working example of your code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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" />
</head>
<body>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
me
</li>
<li role="presentation">
you
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
</body>

Display active Main Menu and sub Menu using CSS and javascript

I have left side menus.
<div class="panel">
<div class="panel-heading panel-red" role="tab" id="headingDash" style="">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
<i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
Dashoboard
</a>
</div>
<div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
<div class="panel-body">
<ul class="nav">
<li class="subMenuList active" style=" ">
Dashboard-1
</li>
<li class="subMenuList" style="">
Dashboard-2
</li>
</ul>
</div>
</div>
</div>
I want to display active main menu and sub menus. On-click of sub menu using css and JS.
I have done it for static main menu and sub menus.
My Fiddle link: https://jsfiddle.net/whv76xd0/6/
How can do this dynamic on click?
Working Fiddle link
Try this.
$(document).ready(function(){
$(document).on("click", ".subMenuList", function(){
$('.panel-heading').removeClass('panel-red');
$('.subMenuList').removeClass('active');
$(this).closest('.panel').find('.panel-heading').addClass('panel-red');
$(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
$(this).addClass('active');
})
})
#pavan, If you want to handle dynamic link of submenu, then try with below jQuery function.
$(document).ready(function(){
$(document).on("click",".subMenuList",function(){
alert();
})
})
Here, instead of alert you can put, any functionality which you want to perform with submenu click event

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/

Getting two bootstrap tabs to work on a single page and accessing the active tab on submit

I have two bootstrap tab components on my page
The first one has two tabs and the second one has three.
The simplified code is as below..
<div class="col-md-12">
<ul id="tab1" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab A</li>
<li role="presentation">Tab B</li>
</ul>
<div id="tab1content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taba">
Tab A
</div>
<div role="tabpanel" class="tab-pane" id="tabb">
Tab B
</div>
</div>
</div>
<div class="col-md-12">
<ul id="tab2" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab X</li>
<li role="presentation">Tab Y</li>
<li role="presentation">Tab Z</li>
</ul>
<div id="tab2content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tabx">
Tab X
</div>
<div role="tabpanel" class="tab-pane" id="taby">
Tab Y
</div>
<div role="tabpanel" class="tab-pane" id="tabz">
Tab Z
</div>
</div>
</div>
<input type="submit" value="Submit" class="btnspl" style="max-width:100%" />
On submit button press I need to find out the active tab in both the components of the page.
I found this code in bootstrap site.. but it is for a single tab..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
What changes would be needed when there are two bootstrap tab components.
jsfiddle(not working) : http://jsfiddle.net/52VtD/13447/
Any help is sincerely appreciated
Thanks
If I'm understanding it right you need to know which tab is active in both the components when "submit" button is correct. To get it you can use following code in button's click handler:
var x=$("#tab1content div.active").prop("id");
var y=$("#tab2content div.active").prop("id");
$("#log").text("TAB 1: "+ x +"\r\nTAB 2: "+ y);
x and y contains the id of selected/active tab in respective tab components. Here is working fiddle.
For getting the currently active tab you can check within click event of submit button hasClass(".active").attr("id").
The second tab container id is same as the first tab container id.

Bootstrap Skip to Next Visible Tab

I have created a "Next" button in Bootstrap tab panel, which skips to the next tab in the sequence, however I want it to skip to the next visible tab i.e. where the li tag does not have the class "hide".
The original code I took from Bootstrap Tabs: Next & Previous Buttons for Forms and adapted as follows:
<ul class="nav nav-tabs">
<li class="active">Products
</li>
<li>Sizes
</li>
<li>Quantities
</li>
<li class="hide">Shipping
</li>
<li>Summary
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').next('li').not(".hide").find('a').trigger('click');
});
});
</script>
Fiddle: http://jsfiddle.net/tyLje3jz/
As you will see I included "not(".hide")".
This is not working quite as expected, as it will go as far as #tab3 but the button on #tab3 does nothing when what I want it to do is skip to #tab5 as #tab4 has the "hide" class.
From my understanding, ".next('li').not('.hide')" should seek out the next "li" tag without the hide class, which in this case is #tab5.
What am I doing wrong?
First, you'll need to use the class .btnNext not the id #btnNext in your click handler.
Based on the question trying to get next item not having a specific class, you can do it like this:
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
The problem is that .next() will grab a single element and .not() will remove any item in the collection that matches the criteria. So right before the hidden tab, your code would only grab the hidden tab and then immediately rule it out. Instead, what you need to do is find all matching items, rule out any hidden ones, and then pick the first.
Demo in Stack Snippets
$(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
});
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Products</li>
<li>Sizes</li>
<li>Quantities</li>
<li class="hide">Shipping</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>

Categories