views:

271

answers:

2

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.

+4  A: 

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 );
});
Phil.Wheeler
Weird how you answered the same thing 5 minutes after me and got all the votes :S
Pablo Fernandez
I know how you feel, and apologies for that. But to be fair, I had already written the first draft when the SO notification showed there was one new answer. I didn't plagiarise; we just both agree that this is one right way to answer the question.
Phil.Wheeler
Thanks for the information... however, I have to apologize, I made a mistake in my code: instead of using "products.php" I do have my tabs as "#tab1", "#tab2", "#tab3", etc. I corrected my first post.How do I incorporate the example code you mentioned with the code I have in my first post?Thanks a lot.
Ricardo Zea
Hang on. Are you using jQuery UI tabs, or have you rolled your own? I've assumed that you're using jQuery UI.
Phil.Wheeler
No, I'm not using jQuery UI tabs, I found that code online somewhere, I don't remember where :(It's probably faster to just implement jQuery UI tabs instead at this point, right?
Ricardo Zea
Well, I don't want to tell you how to build you app, but the UI framework does already have a lot of stuff that's ready to go. It might save you a lot more time in the long run.
Phil.Wheeler
After analyzing my tabs, I decided to not use tabs and create separate pages for each content. Reason: SEO purposes.I gave you a positive vote and chose your answer as the accepted answer, but I have to say that unfortunately I didn't get the opportunity to use your code.Thanks a lot for your help and your time Phil.
Ricardo Zea
No worries. Glad you found a workable solution regardless.
Phil.Wheeler
A: 

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.

Ricardo Zea