<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Pestañas con CSS y JavaScript</title>
<style type="text/css">
div {clear:both;display:table;border:1px solid} span {float:left;padding:0 5px 0 5px;}</style>
<script type="text/javascript">
<!--
function seleccion(opc)
{
//escondemos todos los contenidos
document.getElementById("op1").style.display="none";
document.getElementById("op2").style.display="none";
document.getElementById("op3").style.display="none";
switch(opc)
{
case 1:
//mostramos elcontenido de la primera opcion
document.getElementById("op1").style.display="block";
break;
case 2:
//mostramos elcontenido de la segunda opcion
document.getElementById("op2").style.display="block";
break;
case 3:
//mostramos elcontenido de la tercera opcion
document.getElementById("op3").style.display="block";
break;
}
}
//-->
</script>
</head>
<body>
<h1>Pestañas con CSS y JavaScript</h1>
<h5>Ejemplo de la utilización de pestañas sin recargar la web, utilizando capas y javascript</h5>
<!-- pestañas -->
<div>
<span style="border-right:1px solid;"><a href='javascript:seleccion(1);'>Opción 1</a></span>
<span style="border-right:1px solid;"><a href='javascript:seleccion(2);'>Opción 2</a></span>
<span><a href='javascript:seleccion(3);'>Opción 3</a></span>
</div>
<!-- contenido de las pestañas -->
<div id="op1" style="display:block;width:400px;height:200px;">
Texto opción 1
</div>
<div id="op2" style="display:none;width:400px;height:200px;">
Texto opción 2
</div>
<div id="op3" style="display:none;width:400px;height:200px;">
Texto opción 3
</div>
<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>
Crear cuenta