Como simular un control de Tabs con JavaScript
En el siguiente ejemplo podemos ver como crear el modelo
inicial para simular los controles de Tabs que podemos
encontrar en el desarrollo de aplicaciones de escritorio.
El primer paso es definir nuestros Tabs con código
HTML. Por cada Tabs usaremos un tag DIV, el
mismo que servirá de contenedor de todos los controles
que dicho tab necesite mostrar.
<div id="Tab1">
Este es el tab 1
</div>
<div id="Tab2" style="display:none">
Este es el tab 2
</div>
<div id="Tab3" style="display:none">
Este es el tab 3
</div>
El estilo inicial de los dos últimos Tabs se debe a
que en el ejemplo se pretende mostrar el Tab 1
como Tab inicial.
Una vez construidos estos contenedores, tendremos que crear
las pestañas encargadas en hacer el intercambio entre
cada contenedor.
<a href="#" onclick="Mostrar('Tab1'); return
false;">Tab 1</a>
| <a href="#" onclick="Mostrar('Tab2'); return
false;">Tab 2</a>
| <a href="#" onclick="Mostrar('Tab3'); return
false;">Tab 3</a>
Finalmente, creamos una función JavaScript que se
encargará de mostrar u ocultar los contenedores en base
a cual pestaña se seleccione.
var _TabsArray = new Array();
_TabsArray[0] = "Tab1";
_TabsArray[1] = "Tab2";
_TabsArray[2] = "Tab3";
function Mostrar(TabName)
{
for (i = 0; i < _TabsArray.length;
i)
{
if
(_TabsArray[i] != TabName)
document.getElementById(_TabsArray[i]).style.display
= "none";
}
document.getElementById(TabName).style.display
= "";
}
El Array es el encargado de contener
los IDs de todos los contenedores. Este vector
podría ser cargado dinámicamente en el caso que
se quisiera extender la funcionalidad aquí provista. La
función Mostrar() es la
encargada de recorrect el vector y ocultar todos aquellos tabs
que sean diferentes al seleccionado para, finalmente, mostrar
el seleccionado.
|