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
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 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");
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.
There have been multiple solutions posted here for linking to tabs when using the bootstrap framework, but I'm looking for a slightly different solution and wondering if its possible.
There's a jsfiddle solution here demonstrating the behaviour I require:
http://jsfiddle.net/technotarek/3hJ46/
Outline code below:
js
$("a").on('click', function() {
# check if link id matches an element with data-toggle="tab"?
# activate tab?
});
html
<div class="container">
<p><a "tab-2">Go to Tab #2</a></p>
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<p>You're in Tab #1</p>
<p><a "tab-2">Go to Tab #2</a></p>
<p><a "tab-3">Go to Tab #3</a></p>
</div>
<div class="tab-pane" id="two">
<p>You're in Tab #2</p>
</div>
<div class="tab-pane" id="three">
<p>Now #3.</p>
<p><a "tab-1">Back to Tab #1</a></p>
</div>
</div>
</div>
</div>
</div>
You can click a link within the tab, or from outside the tab (on the same page) and the tab becomes activated. However, this requires that "a" tags have attribute "data-tab-destination" with the tab name. Due to the way we're automatically generating the html it's currently impossible (or v. difficult) to know if the link will point to a tab or any other part of the webpage, so it is not possible to add this attribute.
I'm therefore hoping for a solution (using javascript) that will detect for all links whether it points to a tab by searching for any element with matching id with attribute data-toggle="tab".
Any help greatly appreciated.
HTML
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<p>You're in Tab #1</p>
<p>Go to Tab #2</p>
<p>Go to Tab #3</p>
</div>
<div class="tab-pane" id="two">
<p>You're in Tab #2</p>
</div>
<div class="tab-pane" id="three">
<p>Now #3.</p>
<p>Back to Tab #1</p>
</div>
</div>
</div>
</div>
</div>
JS
$("a").on('click', function() {
var href = $(this).attr('href');
/* Just a hack to get the ID. You may need to think this through
* in more detail for your use case. */
var id = href.replace("#", "");
// http://api.jquery.com/multiple-attribute-selector
if ($("a[data-toggle='tab'][id='" + id + "']").length) {
$("#" + id).click();
}
});
JSFiddle
Edit
Noticed missing logic in my JS code.
+ if ($("a[data-toggle='tab'][id='" + id + "']").length) {
- if ($("a[data-toggle='tab'][id='" + id + "']")) {
How can I detect if a selector returns null?