Activating Second Tab In Page Load Using Jquery
how can i activate the second tab of my web page in page load , i have done the tabs using jquery and ul. below is the codes
Solution 1:
Use a jQuery selector that matches the hash, and click it:
$('.tabs li a[href=\#tab2]').click();
Solution 2:
You can use .eq() for example:
var activeTab = 1; //0 based, so 1 = 2nd
$("ul.tabs li").eq(activeTab).addClass("active").show();
$(".tab_content").eq(activeTab).show();
Or :eq() like this:
$("ul.tabs li:eq(1)").addClass("active").show();
$(".tab_content:eq(1)").show();
Or...what I'd do is use the click handler you already have, no need to duplicate code, like this:
$(function() {
$(".tab_content").hide(); //Hide all content
$("ul.tabs li").click(function() {
$(this).addClass("active").siblings().removeClass("active");
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn().siblings().hide();
returnfalse;
}).eq(1).click(); //click the second
});
Or if you have styling control, make the <a> take up the entire <li> and attach the click handler to the anchor directly:
$(function() {
$(".tab_content").hide();
$("ul.tabs li a").click(function(e) {
$(this).closest("li").addClass("active").siblings().removeClass("active");
$(this.hash).fadeIn().siblings().hide();
e.preventDefault();
}).eq(1).click(); //click the second
});
Solution 3:
$(function () { $("#tabs").tabs({ active: 1 //starting from 0, 1 is the 2nd tab. }); });
Post a Comment for "Activating Second Tab In Page Load Using Jquery"