Introducción

En el tema anterior expuse ejemplos de contenedores de pestañas con JavaScript. Los recursos CSS y JS se encontraba en esa página. Pero los que finalmente voy a usar en este sitio se localizan en otros recursos y presentan algunas modificaciones con respecto a los anteriores. Principalmente difieren en el uso de un elemento <button> en cada pestaña para mejorar la accesibilidad y en la adjudicación de eventos tras la carga de la página, evitando incluir atributos onclick en el HTML que se carga inicialmente. Estos dos principios son algunos de los que estoy intentando llevar a cabo y que ya expuse en un artículo sobre la actualización de este sitio. Ya que he remodelado estos componentes también aprovecho para actualizarlos en ese aspecto.

En este tema expongo los mismos ejemplos usando la versión del sitio de esos componentes. El código común para todos los ejemplos es este:

Código CSS (archivo base.css, componente pestanya-filas, tres primeros ejemplos)

Código CSS (archivo base.css, componente pestanya-cuerpos, último ejemplo)

Código JS (componente pestanyas del módulo Wextensible.general, archivo general.js, todos los ejemplos)

Código CSS y JS en este documento

Estos códigos son copias de los que estoy usando en este sitio, pero podría ser modificado posteriormente. Vea los recursos originales con el botón Código en la barra de botones superior de este documento.

Contenedor de pestañas en dos filas de una tabla

Ejemplo: Componente CSS pestanya-filas, con una fila de pestañas

   

id=tabdiv-0

Contenido de la Primera pestaña.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit.

id=tabdiv-1

Otro contenido para la PESTAÑA 2ª

id=tabdiv-2

El último contenido de la Pestaña 3

Código HTML

Contenedor de pestañas dentro de una pestaña

Ejemplo: Componente CSS pestanya-filas

   
id=tabdiv-100
  
id=tabdiv-200
id=tabdiv-201
id=tabdiv-101
id=tabdiv-102

Código HTML

Contenedor con varias filas de pestañas

Ejemplo: Componente CSS pestanya-filas, con varias filas

   
   
   
id=tabdiv-300
id=tabdiv-301
id=tabdiv-302
id=tabdiv-303
id=tabdiv-304
id=tabdiv-305
id=tabdiv-306
id=tabdiv-307

Código HTML

Contenedor de pestañas en cuerpos de tabla

Ejemplo: Componente CSS pestanya-cuerpos

Contenido de la Primera pestaña.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit.

Otro contenido para la PESTAÑA 2ª
El último contenido de la Pestaña 3

Código HTML