Vinculación a una pestaña específica desde otra página

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 back to a specific tab from a results page and make it the active tab. I know that I have to make use of query string in the url from the results page anchor link.

So, if I have the 3 category results pages and each one have the link back to the form as:

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

What code I need to use in the form page to make sure this works. I read I have to make sure check with jquery if the parameter exists and make use of the location.hash but not sure how to do that.

preguntado el 09 de marzo de 12 a las 15:03

4 Respuestas

Use and grab the location.hash will not contain #id1, so just trigg 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..
}

respondido 09 mar '12, 15:03

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

respondido 09 mar '12, 15:03

Well, each div has a form in it that is being submitted and you land to the results page. Then I want to click redefine search from that results page and come back to the my search form with the correct tab open - gek

location.hash does not represent the querystring, but the anchor reference (with # incluido).

This means if you have the page ./redefine an anchor could be ./redefine#1

La cadena de consulta ?1 will trigger the browser to really go to the page, where #1 will just make the page jump to id="1".

Example: To make jQuery show only show the correct page, you could 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();
    }
});

respondido 09 mar '12, 16:03

Hi, when I add your jquery code the whole tabs section now is hidden. My search form page currently works just fine with 3 tabs and one is active. Each div has a form in it and when you submit it, you land to the results. I just want to have a link from that results page that redefine the search and link the user back to the search page but with the correct div (form) tab open - gek

To use query string from url with jQueryUI tabs:

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

To use hash from url with jQueryUI tabs:

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

respondido 09 mar '12, 16:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.