Tengo una estructura de tabs con 3 niveles:
Home content.
Home 2 content.
Home 3-1 content.
Profile 3-1 content.
Profile 2 content.
Home 3-2 content.
Profile 3-2 content.
Profile content. Este código se puede consultar aquí: ( http://jsfiddle.net/bvta2/3/ ).
Cuando accede al enlace http://fiddle.jshell.net/bvta2/3/show/#profile3-1 , la pestaña Perfil 3-1 aparece activa. Sin embargo, al acceder a http://fiddle.jshell.net/bvta2/3/show/#home3-2 , por ejemplo, la pestaña Inicio 3-2 no está activa.
¿Cómo puedo resolver esto usando jQuery? ¡Gracias!
Eso es porque #home3-2 está nested dentro de una pestaña que está oculta.
Otra forma de ver esto es qué pasaría con el siguiente código:
1
Aunque haya hecho visible la división inferior, todavía estará oculta por su padre.
Cuando cargues la página, tendrás que atravesar el dominio para las tabs principales ocultas y llamar también a show en ellas.
if (location.hash) { $('a[href=' + location.hash + ']').tab('show'); // code to also show parent tabs }
Podrías hacer eso así:
//get the hashed element and find all of it's parent tabs that aren't active $(location.hash).parents('.tab-pane:not(.active)').each(function() { //each pane should have an id - find it's anchor target and call show $('a[href=#' + this.id + ']').tab('show'); });
Demostración en violín: