pestañas

humanista · #1 (**permalink**) 23/04/2007, 15:11

Código HTML:

<script language="JavaScript" type="text/javascript">
function init(){
	for(var i=2; i<=3; i++){
		document.getElementById('contenido'+i).style.display = 'none';
	}
}

function viewSection(id,total){
	for (var i=1; i<=3; i++){
		if(i!=id){
			document.getElementById('contenido'+i).style.display = 'none';
		}else{
			document.getElementById('contenido'+i).style.display = 'block';
		}
	}
}
</script>


<style>

/* --- Menú de contenido recuadro--- */


#menu
{
	font-family:Verdana, Arial, helvetica, sans-serif;
	font-size:16px;
	/*clear:right;
	display:inline;
	margin-left:0px;
	padding-left:0px;*/
}

#menu ul
{
	margin:0;padding:0;
}
	
#menu ul li
{
	list-style-type:none;
	display:block;
	float:left;
	margin:3px 3px 0px 0px;
	padding:3px;
	border:solid #cccccc 1px;
	border-left-width:1px;
	border-bottom-width:0px;
}

#menu ul li a
{
	text-decoration:none;
	text-transform:capitelize;
	color:#000000;
}
	
#menu ul li a:hover
{
	color:#000000;
	text-decoration:none
}

#menu ul li a:active
{
	border:solid #FFFFFF 0px;
}

#contenido1, #contenido2, #contenido3, #contenido4
{
	font-family:Arial, helvetica, sans-serif;
	font-size:11px;
	line-height:16px;
	text-align:justify;
	/*float:left;*/
	clear:left;
	/*display:block;*/
	border:solid #CCCCCC 1px;
	width:740px;
	padding:5px;
}


</style>

	<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" link="black" text="black" vlink="black" alink="black" onload="javascript:init();">

<div id="menu">
	<ul>
		<li><a href="#" onclick="viewSection('1');">Lo más leído</a></li>
		<li><a href="#" onclick="viewSection('2');">Lo más comentado</a></li>
		<li><a href="#" onclick="viewSection('3');">Lo más votado</a></li>
	</ul>
</div>

<div id="contenido1">
texto111111
</div>

<div id="contenido2">
texto222222
</div>

<div id="contenido3">
texto333333
</div>

</body>

_____________________

tengo esto y me funciona. el problema (m estoy volviendo loco) es q no me salen las pestañas como yo quiero.

a ver si consigo explicarlo. tengo 3 pestañas y cada vez q pincho m carga bien los datos pero no sé en q pestaña estoy pq las pestañas no se presentan de diferentes maneras cada vez que está 1 activa.

lo q quiero es lo q se ve comunmente en muchas webs (elpais.com, por ej, los más leídos, los más....), es decir q la pestaña en la q he pinchado cambie su forma.

lo q ahora me aparece son las pestañas con bordes en los 4 costados (arriba, abajo, izq y dcha) y lo q quiero es q cuando se pinche en una pestaña se me borre el borde inferior de tal forma q se muestre como la pestaña activa.

espero haberme explicado

fer10 · #2 (**permalink**) 23/04/2007, 19:50

asignale un id a cada boton pinta el borde de color balnco sobreponiendo los elementos (position:absolute) bajandolos un poco para que el borde del menu (blanco) este ensima del borde de la div

Cita:

objeto.style.borderBottom ="1px solid #fff";

humanista · #3 (**permalink**) 24/04/2007, 02:09

buff!..., podría ser un poco más explícito?, mi conocimiento de los css es limitado.

es decir poner:

<li><a ID=BOTON1 href="#" onclick="viewSection('1');">Lo más leído</a></li>

pero cómo hago para que la pestaña se superponga con el recuadro?

con (position:absolute) pero exactamente cómo lo bajo?, tengo que poner posiciones absolutas con top???, dónde lo pongo?, estoy un poco liada

RBZ · #4 (**permalink**) 24/04/2007, 04:00

Creo que la forma más fácil de hacerlo es aplicándole algún estilo a los enlaces. En este tutorial te lo enseñan cómo poner estilo a los enlaces

Por si hay algo que no entiendas este es el paso anterior.