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

Tengo un formulario con 3 pestañas.

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

Me gustaría poder vincular a una pestaña específica desde una página de resultados y convertirla en la pestaña activa. Sé que tengo que hacer uso de la cadena de consulta en la URL del enlace de anclaje de la página de resultados.

Entonces, si tengo las páginas de resultados de 3 categorías y cada una tiene el enlace de regreso al formulario como:

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

Qué código necesito usar en la página del formulario para asegurarme de que esto funcione. Leí que debo asegurarme de verificar con jquery si el parámetro existe y hacer uso de location.hash pero no estoy seguro de cómo hacerlo.

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

4 Respuestas

Use y tome la ubicación.hash no contendrá #id1, así que solo active esa 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

No hay ningún enlace saliente en su fragmento de código. Si intenta mostrar contenido nuevo dentro de la página sin realizar otra solicitud HTTP, no depende de la URL. Solo guarda tu estado en algunas variables.

respondido 09 mar '12, 15:03

Bueno, cada div tiene un formulario que se envía y llegas a la página de resultados. Luego, quiero hacer clic en redefinir la búsqueda desde esa página de resultados y volver a mi formulario de búsqueda con la pestaña correcta abierta: gek

location.hash no representa la cadena de consulta, sino la referencia de anclaje (con # incluido).

Esto significa que si tienes la página ./redefine un ancla puede ser ./redefine#1

La cadena de consulta ?1 activará el navegador para ir realmente a la página, donde #1 simplemente hará que la página salte a id="1".

Ejemplo: para hacer que jQuery muestre solo la página correcta, podría hacer:

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

Hola, cuando agrego tu código jquery, toda la sección de pestañas ahora está oculta. Mi página de formulario de búsqueda actualmente funciona bien con 3 pestañas y una está activa. Cada div tiene un formulario y cuando lo envía, llega a los resultados. Solo quiero tener un enlace desde esa página de resultados que redefina la búsqueda y vincule al usuario de regreso a la página de búsqueda pero con la pestaña div (formulario) correcta abierta: gek

Para usar la cadena de consulta de la URL con las pestañas de jQueryUI:

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

Para usar hash de url con pestañas jQueryUI:

$(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.