Sistema básico de pestañas con javascript y html

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.

3 pensamientos en “Sistema básico de pestañas con javascript y html

Responder a alex campana Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Notificación de comentarios

Si se suscribirse cuando se publique un nuevo comentario se le notificará por correo electrónico, de esta forma podrá estar informado de todos los comentarios y podrá ver si han respondido al suyo.

También puedes suscribirte sin comentar.