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