Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » CSS » Código de CSS - Pestañas autoajustables con estilos y JavaScript

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

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Pestañas autoajustables con estilos y JavaScriptgráfica de visualizaciones


CSS

Publicado el 26 de Febrero del 2008 por Xavi (548 códigos)
9.900 visualizaciones desde el 26 de Febrero del 2008
Código que muestra como utilizar pestañas auto ajustables en anchura sin utilizar ninguna imagen, únicamente con estilos y un poco de javaScript.
Probado con IE 6, 7, Konqueror 3.5, Firefox 2.0 y Safari 3.0.

Versión 1

Publicado el 26 de Febrero del 2008gráfica de visualizaciones de la versión: Versión 1
9.901 visualizaciones desde el 26 de Febrero del 2008
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title></title>
 
<style type="text/css">
.g {float:left;padding:0px;}
.separator {display:block;width:4px;height:27px;border-bottom:1px solid;}
 
/*estilos para las opciones no seleccionadas*/
.tabu {}
.textu {display:block;float:left;border-right:1px solid #606060; border-left:1px solid #606060;padding:0 5px 2px 5px;background:#9d9d9d;text-align:center;height:20px;color:#fff;}

.a1u {margin:0 5px; border-bottom:1px solid #000;}

.a2u {margin:0 3px; border-right:2px solid #000; border-left:2px solid #000; border-bottom:1px solid #9d9d9d;}

.a3u {margin:0 2px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #9d9d9d;}

.a4u {margin:0 1px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:2px solid #9d9d9d;}

.b1u {margin-top:22px;border-bottom:1px solid;}
 
/*estilos para las opciones seleccionadas*/
.texts {display:block;float:left;border-right:1px solid #606060; border-left:1px solid #606060;padding:0 5px 2px 5px;background:#fff;text-align:center;height:20px;}

.a1s {margin:0 5px; border-bottom:1px solid #606060;}

.a2s {margin:0 3px; border-right:2px solid #606060; border-left:2px solid #606060; border-bottom:1px solid #fff;}

.a3s {margin:0 2px; border-left:1px solid #606060; border-right:1px solid #606060; border-bottom:1px solid #fff;}

.a4s {margin:0 1px; border-left:1px solid #606060; border-right:1px solid #606060; border-bottom:2px solid #fff;}

.b1s {margin-top:22px;border-bottom:1px solid #fff;}

 
/*estilos para seleccionar al pasar por encima en las opciones no seleccionadas*/
.tabu_o {cursor:pointer;}
.textu_o {display:block;float:left;border-right:1px solid #bcbcbc; border-left:1px solid #bcbcbc;padding:0 5px 2px 5px;background:#ddd;text-align:center;height:20px;}

.a1u_o {margin:0 5px; border-bottom:1px solid #bcbcbc;}

.a2u_o {margin:0 3px; border-right:2px solid #bcbcbc; border-left:2px solid #bcbcbc; border-bottom:1px solid #ddd;}

.a3u_o {margin:0 2px; border-left:1px solid #bcbcbc; border-right:1px solid #bcbcbc; border-bottom:1px solid #ddd;}

.a4u_o {margin:0 1px; border-left:1px solid #bcbcbc; border-right:1px solid #bcbcbc; border-bottom:2px solid #ddd;}

</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';



	//window.alert(window.alert(document.getElementById("a").getElementsByTagName('div')[0].className))



	elemento=document.getElementById(id);

	elemento.getElementsByTagName('div')[0].setAttribute((document.all?'className':'class'),'tabu_o');

	elemento.getElementsByTagName('div')[1].setAttribute((document.all?'className':'class'),'a1u_o');

	elemento.getElementsByTagName('div')[2].setAttribute((document.all?'className':'class'),'a2u_o');

	elemento.getElementsByTagName('div')[3].setAttribute((document.all?'className':'class'),'a3u_o');

	elemento.getElementsByTagName('div')[4].setAttribute((document.all?'className':'class'),'a4u_o');

	elemento.getElementsByTagName('div')[5].setAttribute((document.all?'className':'class'),'textu_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'),'tabu');

	elemento.getElementsByTagName('div')[1].setAttribute((document.all?'className':'class'),'a1u');

	elemento.getElementsByTagName('div')[2].setAttribute((document.all?'className':'class'),'a2u');

	elemento.getElementsByTagName('div')[3].setAttribute((document.all?'className':'class'),'a3u');

	elemento.getElementsByTagName('div')[4].setAttribute((document.all?'className':'class'),'a4u');

	elemento.getElementsByTagName('div')[5].setAttribute((document.all?'className':'class'),'textu');

}

-->
</script>
</head>
 
<body>
<div>
	<div class="g separator"></div>
	<div class="g" id='a' onmouseover="javascript:pestana_select('a');" onmouseout="javascript:pestana_unselect('a');" onclick="javascript:window.location='#1'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu">no seleccionado</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='b' onmouseover="javascript:pestana_select('b');" onmouseout="javascript:pestana_unselect('b');" onclick="javascript:window.location='#2'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu" style=''>opcion</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='c'>
		<div class="tabu">
			<div class="a1s"></div><div class="a2s"></div><div class="a3s"></div><div class="a4s"></div>
			<div class="texts">seleccionado</div>
			<div class="b1s"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='d' onmouseover="javascript:pestana_select('d');" onmouseout="javascript:pestana_unselect('d');" onclick="javascript:window.location='#4'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu">otro no seleccionado</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div style="display:block;height:27px;border-bottom:1px solid;"></div>
</div>
</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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s1637