jQuery: tabs where the tab/content can be linked to

Posted by Ricardo Zea on Stack Overflow See other posts from Stack Overflow or by Ricardo Zea
Published on 2010-04-22T02:56:20Z Indexed on 2010/04/22 3:13 UTC
Read the original article Hit count: 312

Filed under:
|
|
|

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="products.php">Product 1</a></li>
  <li><a href="products.php">Product 2</a></li>
  <li><a href="products.php">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.

© Stack Overflow or respective owner

Related posts about tabs

Related posts about JavaScript