How to select a specific tab from another page using the anchor tag in jQuery ..?

Question

I wonder if we can select a specific tab in the jQuery tab from another page ..?

For example, I have 4 menus that are Home | About the project | Services | contact On the services page, I have a tab system with 5 tabs (Flight, Hotels, International Flight, Rail, Bus), so I come to the point that selects the bus link from the home page. I need to display Bus (visible by default - "Flight") on the services page.

I tried to give a link to a bus on a home page like this. services.php # tab4 (e.g. binding label method)

Unfortunately this does not work.

I am using the following jQuery for my tab system.

$(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); 

link tabs on service pages defined in ul li as shown below

 <ul class="tabs"> <li><a href="#tab1">Flight</li> <li><a href="#tab2">Hotels</a></li> <li><a href="#tab3">International Flight</a></li> <li><a href="#tab4">Rail</a></li> <li><a href="#tab5">Bus</a></li> </ul> 

I hope someone can answer the above question.

thanks

Floor

Answer 1

This will be a complete implementation based on your new request:

 $(document).ready(function() { var strHash = document.location.hash; if (strHash == "") { // Go to the first tab as long as there no other tab specified on which // to start. $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content } else $("a[href='" + strHash + "']").parent().click(); //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); 

The problem was that you did not think that if the tab specified for the transition (document hash) is specified, you still have the "// When the page loads ..." area works independently. You can even shorten the first conditional content:

  $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content 

in

  $("ul.tabs li:first").click(); 

... given that you already have the same basic features that are listed in the last click event, but that is up to you. Also please!

Answer 2

Before or after defining click (), add the following:

 strHash = document.location.hash; if (strHash != "") $("a[href='"+strHash+"']").parent().click(); 

Answer 3

( I made a "fiddle" on jsFiddle so you can check this answer.)

The code was almost correct; It seems that the reason was a few HTML errors. Assuming our HTML is as follows:

 <ul id="tabs"> <li><a href="#tab1">Flight</a></li> <li><a href="#tab2">Hotels</a></li> <li><a href="#tab3">International Flight</a></li> <li><a href="#tab4">Rail</a></li> <li><a href="#tab5">Bus</a></li> </ul> <div id="tab1" class="tab_content">1</div> <div id="tab2" class="tab_content">2</div> <div id="tab3" class="tab_content">3</div> <div id="tab4" class="tab_content">4</div> <div id="tab5" class="tab_content">5</div> 

... our JavaScript should be:

 $(document).ready(function() { //When page loads, hide all content $(".tab_content").hide(); $(".tab_content:first").show(); //Show first tab content $("#tabs li:first").addClass("active").show(); //Activate first tab //On Click Event $("#tabs a").click(function() { //Remove any "active" class $("#tabs .active").removeClass("active"); //Add "active" class to selected tab $(this).parent().addClass("active"); // Hide all tab content $(".tab_content").hide(); //Find the href attribute value to identify the active tab + content var a = $(this).attr("href"); //Fade in the active ID content $(a).fadeIn(); return false; }); });