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

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 );
});

Answer 2

After encountering this problem several other times and talking to an SEO expert, I decided to stop using the < a > element for tabs from now on, instead I'm using simple < span > elements, like this:

<ul class="tabs">
  <li><span rel="tabs1" class="defaulttab">Tab 1</span></li>
  <li><span rel="tabs2">Tab 2</span></li>
  <li><span rel="tabs3">Tab 3</span></li>
</ul>

The use of '#' in < a > elements (dummy links) is not SEO friendly, using < span > elements makes the titles/tabs part of the content of the page (SEO friendly) and the functionality is kept intact.

All you would need to do is modify your script to reference 's instead of < a >'s, and add 'cursor:pointer;' to your CSS for the < span >. This works in all browsers, including IE6.

Another good thing about this solution is that if the tabs are down the page, the page won't jump back up when a tab is clicked, this is big usability improvement.