Question

My issue is simple.

I have already implemented a tab system, and I’d probably spend more time implementing another one with the solution I need, than giving a shot at adapting the code I have, and learn something while asking 🙂

My problem is that the tabs can’t be linked to, I need to be able to link to a tab from another website or page, and have that tab get selected upon page load.

ie: I have three tabs showing different products, by default tab 1 is active/selected when the page loads. From the home page I want to link to tab 2 but I can’t link to tab 2 because it doesn’t get selected. Not sure if that makes sense.

Tabs:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

my jQuery:

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(); 
    return false;
  });

});

Is there a way this code can be adapted to be able to link to any tab from anywhere and have that tab get selected when the page loads?

Thanks in advance.

Answer 1

Your tabs would be more usable like this:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

So that you are now able to look for a hash in the URL of the browser (e.g. use location.pathname to extract the URL hash and use the $.tabs().select([id] or [index]) to set the tab).

For example

$(function(){
   $('tabs').tabs();
   var hash = location.hash;
   $('tabs').tabs( "select" , hash );
});