JQuery Tabs y Hyperlinking (ayúdame a corregir mi código, por favor)

Estoy usando varias páginas que tienen tabs jQuery. Digamos que tengo Página1.html con # tab1 y # tab2 y Página2.html con # tab3 y # tab4. Mi código tiene problemas con:

1) Dentro del contenido de la pestaña, la página1.html # tab2 tiene un hipervínculo a la página1.html # tab1. El enlace no funciona: la página simplemente permanece en # tab1 al hacer clic en el enlace. Sin embargo, un hipervínculo en el contenedor de menú en la Página1 a # tab1 funciona. Ambos hipervínculos usan el mismo a href = “# tab1” pero, por la razón que sea, solo el enlace fuera del contenido de Page1.html # tab2 funciona cuando se vincula a la Página1.html # tab1. Los hipervínculos en el contenedor de menú siempre funcionan.

2) Si envío a alguien un hipervínculo a www.Page1.html # tab2, la URL de la página se muestra como www.Page1.html con la pestaña 1, lo que significa que no puedo vincular directamente a una pestaña. Sin embargo, el menú en el sitio web se vincula correctamente a las tabs. Si hago clic en el enlace del menú de Page2.html # tab3 mientras navego por la página1.html, la pestaña se cargará correctamente y la URL mostrará la página2.html # tab3 y seguirá siendo así incluso si hago clic en # tab4 en la página. La URL SOLAMENTE cambia al hacer clic en los hipervínculos del menú a diferentes páginas, es decir, la página1.html # tab1 a la página2.html # tab3. Al hacer clic en Página2.html # tab3 mientras está en la página2.html # tab4, el contenido de la pestaña cambiará correctamente a # tab3 pero la URL permanecerá como Page2.html # tab4.

Lo que quiero:

A) Para poder enviar a alguien un enlace directamente a una pestaña. Enviar a alguien un enlace a www.Page1.html # tab2 siempre se cargará como la URL www.Page1.html con la primera pestaña que se muestra. Sin embargo, los hipervínculos del menú en la página funcionan.

B) Para poder vincular entre tabs en la misma página si el enlace está dentro del contenido de la pestaña. Por ejemplo, un enlace en el contenido de la página1.html # tab1 debería poder enlazar con la página1.html # tab2. En este momento, solo funciona si el enlace en el contenido de la Página1.html # tab1 está enlazando a una pestaña en una página separada como Page2.html # tab3.

C) ** CRÉDITO ADICIONAL ** : cuando hago clic directamente en una pestaña, la imagen de la pestaña “aparece” y la pestaña “unpops” seleccionada anteriormente. Cuando hago clic en un hipervínculo de menú a una pestaña, la pestaña anterior permanece destapada incluso con el contenido correcto para la pestaña que se acaba de seleccionar. O bien, si usa un enlace de menú para desplazarse a una pestaña en una página nueva, no hay tabs “emergentes”, pero se muestra el contenido de la pestaña correcta. Creo que corregir los problemas anteriores también resolverá este problema.

Aquí está mi código:

 $(document).ready(function() { var tabId = location.hash; if(tabId) { $(tabId).show(); } $(function () { $('a[href^="#"]').click(function(e){ e.preventDefault(); $('html,body').scrollTop($(this.hash).offset().top - 50); }); }); });   $(document).ready(function() { var tabContents = $(".tab_content").hide(), tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar var tabId = location.hash; if(tabId) { $(tabId).show(); } else { tabs.first().addClass("active").show(); tabContents.first().show(); } tabs.click(function() { var $this = $(this), activeTab = $this.find('a').attr('href'); if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){ $this.addClass('active').siblings().removeClass('active'); tabContents.hide().filter(activeTab).fadeIn(); } return; }); });  

De todos modos, soy un gran novato, así que mientras mejor sea el código que proporciones, más fácil será que apruebe tu respuesta como correcta. 🙂

¡Gracias!

Debes hacer hashable las tags de anclaje , es decir, hacerlas ‘bookmarkable’ para el usuario front-end. Pareces estar en camino de crear tu propio plugin de tabs, pero jQuery UI te hará la parte de hash. Aquí hay una configuración de demostración que muestra las tabs que mencionaste:

http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/

MANIFESTACIÓN:

Aquí está la página de demostración -> http://muledesign.com/demo/tabs/default-tabs.html

Página de demostración con enlace hashable en la pestaña -> http://muledesign.com/demo/tabs/default-tabs.html#movie

Re: punto C) – Intente usar un complemento de lightbox y adjuntar la función de apertura / inicio de los complementos de lightbox al evento activate en las tabs de la IU -> http://api.jqueryui.com/tabs/#event-activate

Aprecio que no quieras usar plugins, pero ya estás usando jquery so meh.