Crear cuenta<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- http://www.lawebdelprogramador.com --><html>
<head>
<title>Pestañas con estilos CSS y JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
/*Determina el grupo de pestañas*/.grupoPestanas{clear:both;text-align:center;}
/*Determina una pestaña en concreto*/.pestana_s{float:left;width:200px;}
.pestana_u{float:left;width:200px;cursor:pointer;}
/* p1s, p2s, p3s, p4s = Determina la curva superior de la pestaña seleccionada (select)
p1u, p2u, p3u, p4u = Determina la curva superior de la pestaña NO seleccionada (unselect)
pbs = Determina la linea inferior (Bottom) de la pestaña seleccionada
pbu = Determina la linea inferior (Bottom) de la pestaña NO seleccionada
*/.p1s, .p2s, .p3s, .p4s, .p1u, .p2u, .p3u, .p4u, .p1u_o, .p2u_o, .p3u_o, .p4u_o, .pbs, .pbu{font-size:1px; overflow:hidden; display:block;}
.p1s {height:1px; background:#606060; margin:0 5px;}
.p2s {height:1px; background:#fff; border-right:2px solid #606060; border-left:2px solid #606060; margin:0 3px;}
.p3s {height:1px; background:#fff; border-right:1px solid #606060; border-left:1px solid #606060; margin:0 2px;}
.p4s {height:2px; background:#fff; border-right:1px solid #606060; border-left:1px solid #606060; margin:0 1px;}
.p1u {height:1px; background:#000; margin:0 5px;}
.p2u {height:1px; background:#9d9d9d; border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.p3u {height:1px; background:#9d9d9d; border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.p4u {height:2px; background:#9d9d9d; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.pbs {height:1px; background:#fff;}
.pbu {height:1px; background:#606060;}
/*formato de la pestaña seleccionada*/.pselect {background:#fff; border-right:1px solid #606060; border-left:1px solid #606060; padding:0 5px 5px 5px; font-weight:bold; overflow:hidden;}
/*formato de la pestaña NO seleccionada*/.punselect {background:#9d9d9d; border-right:1px solid #000; border-left:1px solid #000; padding:0 5px 5px 5px; font-weight:bold; overflow:hidden;color:#ececec;}
/*Estos estilos son los utilizados al pasar el raton por encima (over)*/.p1u_o {height:1px; background:#bcbcbc; margin:0 5px;}
.p2u_o {height:1px; background:#ddd; border-right:2px solid #bcbcbc; border-left:2px solid #bcbcbc; margin:0 3px;}
.p3u_o {height:1px; background:#ddd; border-right:1px solid #bcbcbc; border-left:1px solid #bcbcbc; margin:0 2px;}
.p4u_o {height:2px; background:#ddd; border-right:1px solid #bcbcbc; border-left:1px solid #bcbcbc; margin:0 1px;}
.punselect_o {background:#ddd; border-right:1px solid #bcbcbc; border-left:1px solid #bcbcbc; padding:0 5px 5px 5px; font-weight:bold; overflow:hidden;color:#000;}
/*Muestra la linea inferior*/.bordeInferior {float:left;border-bottom:1px solid;height:30px;}
--></style>
<script type="text/javascript">
<!--
//Funcion que se ejecuta cuando pasa el raton por encima de una pestaña no activa
function pestana_select(id)
{
//Devuelve la cantidad de hijos del id=a
//window.alert(document.getElementById("a").childNodes.length);
//Devuelve la cantidad de elementos dentro del id=a del tipo 'b' (otro ejemplo seria del tipo 'div')
//window.alert(document.getElementById("a").getElementsByTagName('b').length);
//Devuelve el nombre del tercer tag del tipo 'b' dentro del id=a
//window.alert(document.getElementById("a").getElementsByTagName('b')[2].className);
//Permite cambiar una propiedad en concreto
//elemento.getElementsByTagName('a')[0].style.color='#000';
elemento=document.getElementById(id);
elemento.getElementsByTagName('div')[0].setAttribute((document.all?'className':'class'),'punselect_o');
elemento.getElementsByTagName('b')[0].setAttribute((document.all?'className':'class'),'p1u_o');
elemento.getElementsByTagName('b')[1].setAttribute((document.all?'className':'class'),'p2u_o');
elemento.getElementsByTagName('b')[2].setAttribute((document.all?'className':'class'),'p3u_o');
elemento.getElementsByTagName('b')[3].setAttribute((document.all?'className':'class'),'p4u_o');
}
//Funcion que se ejecuta cuando el raton deja de pasar por encima de una pestaña no activa
function pestana_unselect(id)
{
elemento=document.getElementById(id);
elemento.getElementsByTagName('div')[0].setAttribute((document.all?'className':'class'),'punselect');
elemento.getElementsByTagName('b')[0].setAttribute((document.all?'className':'class'),'p1u');
elemento.getElementsByTagName('b')[1].setAttribute((document.all?'className':'class'),'p2u');
elemento.getElementsByTagName('b')[2].setAttribute((document.all?'className':'class'),'p3u');
elemento.getElementsByTagName('b')[3].setAttribute((document.all?'className':'class'),'p4u');
}
--></script>
</head>
<body>
<h1>Pestañas con estilos CSS y JavaScript</h1>
<div class='grupoPestanas'>
<div class='bordeInferior' style='width:10px;'></div>
<div id='a' class='pestana_u' onmouseover="javascript:pestana_select('a');" onmouseout="javascript:pestana_unselect('a');" onclick="javascript:window.location='#1'">
<b class="p1u"></b><b class="p2u"></b><b class="p3u"></b><b class="p4u"></b>
<div class="punselect" style='height:20px;'>
No seleccionada
</div>
<b class="pbu"></b>
</div>
<div class='bordeInferior' style='width:2px;'></div>
<div class='pestana_s'>
<b class="p1s"></b><b class="p2s"></b><b class="p3s"></b><b class="p4s"></b>
<div class="pselect" style='height:20px;'>
Seleccionada !!!
</div>
<b class="pbs"></b>
</div>
<div class='bordeInferior' style='width:2px;'></div>
<div id='b' class='pestana_u' onmouseover="javascript:pestana_select('b');" onmouseout="javascript:pestana_unselect('b');" onclick="javascript:window.location='#2'">
<b class="p1u"></b><b class="p2u"></b><b class="p3u"></b><b class="p4u"></b>
<div class="punselect" style='height:20px;'>
No seleccionada
</div>
<b class="pbu"></b>
</div>
<div class='bordeInferior' style='width:2px;'></div>
<div id='c' class='pestana_u' onmouseover="javascript:pestana_select('c');" onmouseout="javascript:pestana_unselect('c');" onclick="javascript:window.location='#3'">
<b class="p1u"></b><b class="p2u"></b><b class="p3u"></b><b class="p4u"></b>
<div class="punselect" style='height:20px;'>
No seleccionada
</div>
<b class="pbu"></b>
</div>
<div class='bordeInferior' style='width:10px;'></div>
</div>
<p> </p><p> </p>
<script type="text/javascript"><!--
google_ad_client = "pub-5586981122800176";
//728x90, creado 2/01/08
google_ad_slot = "6081869238";
google_ad_width = 728;
google_ad_height = 90;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
No hay comentarios
Ver ejemplo