I am working on a project and using bootstrap tabs property. http://getbootstrap.com/javascript/#tabs
I got this from the bootstrap.com website:
<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"> AAAAAA</div>
<div role="tabpanel" class="tab-pane" id="profile">BBBBBB</div>
<div role="tabpanel" class="tab-pane" id="messages">CCCCC</div>
<div role="tabpanel" class="tab-pane" id="settings">DDDD</div>
</div>
</div>
I want to get the id of the tab that is displaying and assing it to
val id
I think i need to use javascript or jquery but i dont have any experience with any of them.
$(".tab-pane").each(function(){
var id = $(this).attr("id");
// work with id
// to modify it
$(this).attr("id",newval)
})
To get the active tab, using JQuery:
var activeTab = $(".tab-content").find(".active");
var id = activeTab.attr('id');
If you want to get the id of your first div you use
var id = document.getElementById("home");
or you can use
var id = document.querySelector("#home");
Related
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/
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.
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
I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:
<ul class="nav nav-pills" role="pilllist" id="myPill">
<li role="presentation" class="active">Show all</li>
<li role="presentation">Cars</li>
</ul>
<div class="pill-content">
<div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
<div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>
<script>
$(function () {
$('#myPill a:last').pill('show')
})
</script>
Why am I getting this error message?
You're using .pills('show'); where you should be using .tab('show'); as seen below:
$(function () {
$('#myPill a:last').tab('show')
});
Also, your HTML is incorrect for pills:
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation" class="active">Show All</li>
<li role="presentation">Cars</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>
<div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>
Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.
Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.
Take a look at this Bootply to see how the tabs work.
I am working on an asp.net page. I have added a jquery plugin for tabs. this is html5 based and have html like this:
<ul class="nav nav-tabs" id="myTab">
<li class="active">All (902)</li>
<li id="tabToday">Today (111)</li>
<li>Since last visite (432)</li>
<li>Vacancies (92)</li>
<li>Trainings (543)</li>
<li>Tenders (233)</li>
<li>Scholarships (1)</li>
<li>Other (4)</li>
<li class="pull-right tab-tbilisi"><a class="tab-tbilisi-a" href="#tbilisi">RUSTAVI</a></li>
<li class="pull-right tab-kataisi"><a class="tab-kataisi-a" href="#kataisi">BATUMI</a></li>
<li class="pull-right tab-batumi"><a class="tab-batumi-a" href="#batumi">KATAISI</a></li>
<li class="pull-right tab-rustavi"><a class="tab-rustavi-a" href="#rustavi">TBILISI</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="all">
<div class="jobs-table">
jobs listing
</div>
</div>
<div class="tab-pane" id="since">
Since</div>
<div class="tab-pane" id="vacancies">
Vacancies</div>
<div class="tab-pane" id="trainings">
Trainings</div>
<div class="tab-pane" id="tenders">
Tenders</div>
<div class="tab-pane" id="scholarships">
Scholarships</div>
<div class="tab-pane" id="other">
Other</div>
<div class="tab-pane" id="tbilisi">
Tbilisi</div>
<div class="tab-pane" id="kataisi">
Kataisi</div>
<div class="tab-pane" id="batumi">
Batumi</div>
<div class="tab-pane" id="rustavi">
Rustavi</div>
</div>
</div>
this plugin loads div when header is clicked. I want to change it so that when user clicks header, then a new asp.net page loads in the tab contents. I dont want to use Iframe. I can use something like below and it works:
$("#tabToday").click(function () {
$('#today').load('controls/TodaysVacancies.ascx', function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
}
);
});
But I want then when a tab changes then URL also changes.
You can simply set the href attribute to your <a> tag and load it via ajax
<ul class="css-tabs" id='myTab'>
<li>Tab 1</li>
<li>Second tab</li>
<li>An ultra long third tab</li>
</ul>
<!-- single pane. it is always visible -->
<div class="css-panes">
<div style="display:block"></div>
</div>
jQuery
$("#myTab").tabs("div.css-panes > div", {effect: 'ajax'});
check this