Un sistema de pestañas es bastante sencillo de implementar. Necesitamos dos capas, en las cuales pondremos las pestañas y los contenidos.
Dentro de la capa de pestañas, introducimos en etiquetas span (por ejemplo) los títulos y con el manejador del evento onclick la función que activará/mostrará cada capa de contenidos.
Si nos fijamos en la sección Esqueleto HTML Podemos ver el esqueleto de esta misma página, y la forma de activarse/desactivarse mediante la función selecciona() que se puede ver definida en la sección javascript. La definición de estilos básicos del sistema se puede ver en la sección Estilos.
Este es el esqueleto html de esta página.
<body onload="alturaContenido()"> <h1> Sistema de pestañas </h1> <div id="pestas"> <span class="pesta activa" id="pesta_introduccion" onclick="selecciona(this.id)"> Introducción </span><span class="pesta inactiva" id="pesta_esqueleto" onclick="selecciona(this.id)"> Esqueleto HTML </span><span class="pesta inactiva" id="pesta_estilos" onclick="selecciona(this.id)"> Estlos </span><span class="pesta inactiva" id="pesta_javascript" onclick="selecciona(this.id)"> javascript </span> </div> <div id="contenido" class="activa"> <div class="capa visible" id="capa_introduccion"> Introducción:<br /> </div> <div class="capa invisible" id="capa_esqueleto"> Esqueleto HTML:<br /> </div> <div class="capa invisible" id="capa_estilos"> Estilos:<br /> </div> <div class="capa invisible" id="capa_javascript"> programación javascript:<br /> </div> </div> </body>
La definición de estilos de esta página concerniente al sistema de pestañas puede verse en la hoja de estilos pestas.css, que se enlaza en la cabecera de esta página.
En el cuerpo de la página se pueden redefinir algunos estilos según la estética que se quiera dar. En concreto hemos añadido un color de fondo a la capa de las pestañas.
body {
height: 100%;
margin: 0px;
overflow: hidden;
}
#pestas {
margin: 0px;
padding: 0px;
}
#contenido {
margin: 0px;
padding: 0px;
border: 2px inset gray;
border-top: 0px;
overflow: auto;
}
.pesta {
border: 2px inset gray;
margin: 0px;
padding: 1px 7px;
border-bottom: 0px;
}
.activa {
background-color: #eeeeee;
cursor: default;
}
.inactiva {
background-color: #bbbbbb;
cursor: pointer;
}
.capa {
overflow: auto;
}
.visible {
display: block;
}
.invisible {
display: none;
}
Lo básico en programación javascript enlazado en pestas.js y puede verse a continuación sobre este sistema de pestañas son 4 elementos:
- La definición/inicialización de la variable capaActual.
- La función "esActivo()" que se ejecuta cuando se intenta activar la pestaña seleccionada.
- La función "selecciona()" que actualiza la variable capaActual y activa la pestaña seleccionada.
- Y la función "alturaContenido()" que se invoca al cargarse la página y redimensiona las capas con contenido.
Nótese que la función "esActivo()" no hace nada, pero en el cuerpo de la página ha sido redefinida mostrando una alerta...
capaActual = "introduccion";
function esActivo(elemento) {
return;
}
function selecciona(elemento) {
if (elemento.split("_")[1] == capaActual) esActivo(elemento);
else {
document.getElementById("pesta_" + capaActual).className = "pesta inactiva";
document.getElementById("capa_" + capaActual).className = "capa invisible";
capaActual = elemento.split("_")[1];
document.getElementById("pesta_" + capaActual).className = "pesta activa";
document.getElementById("capa_" + capaActual).className = "capa visible";
}
}
function alturaContenido() {
var altura = document.body.offsetHeight;
var alturaPestas = document.getElementById("pestas").offsetTop;
var tamPestas = document.getElementById("pestas").offsetHeight;
document.getElementById("contenido").style.height = (altura - (alturaPestas + tamPestas)) + "px";
}