Código de CSS - Pestañas con estilos y JavaScript

Imágen de perfil

Pestañas con estilos y JavaScriptgráfica de visualizaciones


CSS

Publicado el 02 de Enero del 2008 por Xavi
14.898 visualizaciones desde el 02 de Enero del 2008. Una media de 35 por semana
Código que muestra como utilizar pestañas sin utilizar ninguna imagen, únicamente con estilos y un poco de javaScript.
Probado con IE 5.5, 6, 7 Konqueror, Firefox y Safari.

Versión 1

Publicado el 02 de Enero del 2008gráfica de visualizaciones de la versión: Versión 1
14.899 visualizaciones desde el 02 de Enero del 2008. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s1620