¿Vincular directamente a una pestaña de jQuery desde otra página?

Comencemos diciendo que soy hábil en HTML y CSS, pero esto de jQuery es algo nuevo para mí. Así que esto podría ser realmente fácil de solucionar y he visto otras respuestas, pero no puedo entenderlo.

Tengo una tabla de tabs jQuery configurada con cuatro tabs, así:

 

El contenido de cada pestaña está en una etiqueta div separada debajo de él, así:

 

Tab content goes here.

Lo que bash hacer es crear un enlace en la página de inicio que pueda vincular directamente a la pestaña 2 o la pestaña 3, que están en una página separada. ¿Alguien puede ayudarme con esto?

Puede usar las tabs jQuery UI, eso lo hace automáticamente.

Aquí hay un violín de trabajo

Enlaces de pestaña

Primera pestaña

Segunda pestaña

Tercera pestaña

Referencia: tabs JQuery UI

Aún mejor, puede cambiar el hash en select para que los usuarios puedan copiar la url ellos mismos así

 $('#tabs').tabs({ select: function(event, ui) { window.location.hash = ui.tab.hash; } });​ 

Está en la documentación 🙂 un fragmento bastante simple, lo he usado yo mismo.

 var $tabs = $('#example').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; }); 

Si desea hacerlo “en carga” de la página (es decir, el enlace en la página de inicio lo lleva a una pantalla con tabs diferente), simplemente desea transmitir algo en la solicitud para que la carga del documento pueda descifrar y usar el. tabs (“seleccionar”, tabNo) como se muestra arriba. De nuevo, he hecho esto en código de producción y es confiable.

Supongo que todos los divs de contenido son visibles y necesita desplazarse a ese div en particular cuando el usuario hace clic en él. Solo necesita vincular el botón a un evento de desplazamiento.

  $(document).ready(function() { $('button2').click = function (){ $(document).scrollTo('#tab2'); } }); $(document).ready(function() { $('button3').click = function (){ $(document).scrollTo('#tab3'); } }); 

Ahora crea dos botones con id ‘button1’ y ‘button2’. Por ejemplo.

 
Tab2
or Tab2

Cuando el usuario hace clic en ellos, se lo lleva al contenido div.