Jquery: Tabs Where The Tab/content Can Be Linked To

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

Solution 1:

Your tabs would be more usable like this:

<ul><li><ahref="#tab1">Product 1</a></li><li><ahref="#tab2">Product 2</a></li><li><ahref="#tab3">Product 3</a></li></ul><divclass="tab_container"><divid="tab1"class="tab_content">Product 1 info...</div><divid="tab2"class="tab_content">Product 2 info...</div><divid="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 );
});

Solution 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:

<ulclass="tabs"><li><spanrel="tabs1"class="defaulttab">Tab 1</span></li><li><spanrel="tabs2">Tab 2</span></li><li><spanrel="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.