Fichas NESTED en Material Design Lite – ¿Las tabs anidadas no responden COMPLETAMENTE a los eventos de clic?

JSFiddle aquí.

Estoy tratando de usar las tabs anidadas en una página web donde estoy usando Material Design Lite . Por lo tanto, consulte en JSFiddle linked o en la demostración a continuación, si hace clic en la pestaña externa llamada ONE , verá 4 tabs anidadas . El problema es con estas tabs anidadas:

  1. La primera de estas tabs anidadas está Activa por defecto, por lo que su encabezado / título de tabulación tiene un acento de color rosa debajo. Cuando hago clic en las otras tabs anidadas, este acento de color rosa se debe quitar de la primera pestaña anidada y se debe agregar a la pestaña en la que se hace clic. Pero eso NO sucede.

    Cuando ejecuto esta prueba en localhost, la parte #something en la URL cambia como debería (como por defecto la URL termina con #scroll-tab-1 , pero cuando hago clic en la pestaña titulada BOB , la URL cambia para terminar con #scroll-tab-2 ), PERO el acento de color rosa no se agrega al título de la pestaña recientemente hecho clic.

  2. Hay una fila vacía de color Indigo (es decir, espacio horizontal vacío) debajo de las tabs anidadas. ¿Por qué? Necesito deshacerme de esto.

Entonces, ¿cómo soluciono estos problemas, especialmente el primero? Gracias de antemano.

    
Title
Title

Responda a su segundo punto : “Fila vacía de color índigo”.

Olvidaste agregar la clase ‘mdl-layout__tab-bar-container’ como padre al “mdl-layout__tab-panel”.

Comprueba mi jsFiddle

  

Acerca de su primer punto: creo que el equipo de MDL no manejó la pestaña anidada. Cuando haces clic en la pestaña anidada, obtienes un error:

Unkeught TypeError: no se puede leer la propiedad ‘classList’ de null

El mejor enfoque para manejar las tabs anidadas debería ser: Cuando haces clic en la pestaña, simplemente verifica la clase padre ‘mdl-layout__tab-bar-container’, luego activa las tabs y el contenido bajo este padre:

 $('.mdl-layout__tab').on('click', function() { $this = $(this); if($this.hasClass('is-active')) return; $parent = $this.closest('.mdl-layout__tab-bar'); $('.mdl-layout__tab', $parent).removeClass('is-active'); $this.addClass('is-active'); }); 

jsFiddle Demo (En esto puedo hacer que la pestaña MDL anidada esté activa)