Con el siguiente javascript conseguiremos un sencillo funcionamiento de pestañas pero muy útil ya que es la base para poder crear uno con el estilo que deseemos.
¿Como conseguimos el funcionamiento de las pestañas?
Para conseguir el funcionamiento de la pestañas lo haremos mediante capas <div> superponiendo una encima de las otras.
¿Para que utilizamos el javascript?
Con el javascript manipulas los estilos de las capas haciéndolas visibles o invisibles y posicionandolas encima o debajo a nuestro gusto.
El código javascript escrito a continuación contiene una función general que podemos utilizar para varios grupos de pestañas.
Javascript:
| <script type="text/javascript"> function pestana(grupo_pesta, id_pesta){ var pestanas = document.getElementById(grupo_pesta); var Tpestanas = pestanas.getElementsByTagName("div"); for(var i=0; i<Tpestanas.length; i++) { Tpestanas[i].style.zindex="-1000"; Tpestanas[i].style.visibility="hidden"; } document.getElementById(id_pesta).style.zIndex="1000"; document.getElementById(id_pesta).style.visibility="visible"; } </script> |
NOTA: El código javascript debe ir al principio de la página para que funcione correctamente.
Código HTML con las pestañas:
| <div id="pestanas"> <input type="button" onClick="pestana('pestanas', 'pesta1')" value="pestaña1" /> <input type="button" onClick="pestana('pestanas', 'pesta2')" value="pestaña2" /> <input type="button" onClick="pestana('pestanas', 'pesta3')" value="pestaña3" /> <div id="pesta1" style="z-index:1000; visibility:visible; position:absolute"> contenido de la pestaña1 </div> <div id="pesta2" style="z-index:-1000; visibility:hidden; position:absolute"> contenido de la pestaña2 </div> <div id="pesta3" style="z-index:-1000; visibility:hidden; position:absolute"> contenido de la pestaña3 </div> </div> |
Explicación del código HTML:
- Con el primer <div id="pestanas"> le indicamos el grupo de pestañas
- Con los <input> creamos un botón que llamará la función pestana donde debemos indicar el grupo de pestañas y la pestaña que vamos a visualizar, cada input debe llamar al grupo de pestañas y a una pestaña diferente.
- Con los siguiente <div> creamos las pestañas, cada una de ellas debe llevar un identificador diferente (id=) y los estilos correspondientes. Solo puede haber una pestaña con style="z-index:1000; visibility:visible; position:absolute" en el mismo grupo de pestañas.
gracias por la colaboracion de este tema me sirvio para entender como funciona..
Muchas Gracias por el tutorial 😉
Lo he implementado en la web de un cliente que me solicitó unos textos en formato de pestañas y funciona perfectamente.
Un saludo desde Barcelona !
me gustaría saber como es el código de este tipo de sistema de comentarios