Link to a specific tab from another page

Question

I have a form with 3 tabs

<div class="tabs"> <ul class="tabset"> <li><a class="active"><span>Shirts</span></a></li> <li><a href="#"><span>Jeans</span></a></li> <li><a href="#"><span>Shoes</span></a></li> </ul> <div id="1"> <p> Shirts </p> </div> <div id="2"> <p> Jeans</p> </div> <div id="3"> <p> Shoes</p> </div> </div> 

I would like to be able to link to a specific tab from the results page and make it an active tab. I know that I should use the query string in the url from the link link of the result page.

So, if I have 3 category results pages, and each of them has a link to a form like:

  <a href="./redefine?tab=id1"></a> <a href="./redefine?tab=id2"></a> <a href=".redefine?tab=id3"></a> 

What code do I need to use on the form page to make sure this works. I read that I need to make sure with jquery it checks to see if the parameter exists and uses location.hash, but not sure how to do it.

Answer 1

Use and capture location.hash will not contain # id1, so just trigger that id

 var hash = location.hash; // Get the hashtag if(hash!=""){ // See if it contain something jQuery(hash.replace("#","")).trigger("click") // Remove # char from it and put the result as the selector.. } 

Answer 2

There is no outbound link in the code snippet. If you are trying to display new content on a page without making another HTTP request, you are not dependent on the URL. Just save your status in some variables.

Answer 3

location.hash not a sequence of requests, but a binding link (with # included).

This means that if you have a ./redefine page, the anchor can be ./redefine#1

The request ?1 will force the browser to really go to the page, where #1 will just go to the id="1" page.

Example: To show jQuery only show the correct page, you can do:

HTML

 <div class="tabs"> <ul class="tabset"> <li><a class="active" href="#1"><span>Shirts</span></a></li> <li><a href="#2"><span>Jeans</span></a></li> <li><a href="#3"><span>Shoes</span></a></li> </ul> <div class="tab" id="1"> <p> Shirts </p> </div> <div class="tab" id="2"> <p> Jeans</p> </div> <div class="tab" id="3"> <p> Shoes</p> </div> </div> 

Javascript

 $('.tab').hide(); $(window).bind('hashchange', function() { $('.tabset a').removeClass('active'); $('.tab').hide(); if (location.hash) { $('.tabset a[href="' + location.hash + '"]').addClass('active'); $(location.hash).show(); } }); 

Answer 4

To use the query string from jQueryUI tabbed url:

 $(function(){ /* get search string from url */ var query = location.search; var reg = /\?tab=id/; /* if search query use that value, if not use zero*/ var tab= (query && query!='#') ? query.replace(reg,'') -1 : 0; $('#tabs').tabs({ selected: tab}); }) 

Use hash from jQueryUI tabbed url:

 $(function(){ /* get search string from url */ var query = location.hash; var reg = /\#/; /* if search query use that value, if not use zero*/ var tab= (query && reg.test(query)) ? query.replace(reg,'') -1 : 0; $('#tabs').tabs({ selected: tab}); })