Foros del Web » Programando para Internet » Javascript »

Pestaña activa en menú

Estas en el tema de Pestaña activa en menú en el foro de Javascript en Foros del Web. Hola a todos! Estoy haciendo un menú de pestañas con HTML, CSS y JavaScript. Tengo este HTML: <ul class="tabmenu"> <li><a href="javascript :void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Informaci&oacute;n</a></li> <li><a ...
  #1 (permalink)  
Antiguo 03/10/2011, 19:00
 
Fecha de Ingreso: octubre-2010
Mensajes: 12
Antigüedad: 14 años, 1 mes
Puntos: 0
Pestaña activa en menú

Hola a todos! Estoy haciendo un menú de pestañas con HTML, CSS y JavaScript.

Tengo este HTML:


<ul class="tabmenu">
<li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Informaci&oacute;n</a></li>
<li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li>
<li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li>
<li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">C&oacute;mo llegar</a></li>
</ul>


A esto le agregué un poco de CSS para el estilo y las siguientes líneas en javascript:


<script type="text/javascript">
function tbs(id){
return document.getElementById(id);
}

function tabsen(){
tbs("1").style.display = "none";
tbs("2").style.display = "";
tbs("3").style.display = "";
tbs("4").style.display = "";
}

function tabs(id) {
tabsen();
var e = tbs(id);
e.style.display = ( e.style.display == '' ) ? 'block' : '' ;
}

function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'active';
prevLink = ele.id;
}
</script>


El problema es que no sé cómo hacer para que la primera pestaña aparezca activa al abrirse la página. Ya probé con ponerle class='active', pero aunque así aparece activa, al clickear sobre otra pestaña la primera no se desactiva. Solamente al cliquear sobre la primera y después sobre otra ahí sí se desactiva.

Alguien puede ayudarme? :S
  #2 (permalink)  
Antiguo 03/10/2011, 21:59
Avatar de Artificium  
Fecha de Ingreso: enero-2011
Mensajes: 492
Antigüedad: 13 años, 10 meses
Puntos: 81
Respuesta: Pestaña activa en menú

Bueno, en tu código veo cosas que pueden mejorarse, como el uso de dos funciones, se puede hacer solo con una, pero en todo caso, debes definir la variable global prevLink dandole el valor de 0 por defecto.

Etiquetas: html, pestaña, activo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:39.