Tengo un menú que no termina de funcionar como yo quiero, el probelma es el siguiente:
La primera opción esta en active al clicar en la segunda la primera se desactiva y se activa la segunda, hasta aquí todo correcto pero al clicar en la tercera la segunda no se desactiva así con el resto.
Código HTML:
<link href="css/style.css" rel="stylesheet" type="text/css">
<div id="cubiertas">
<ul class="cubi">
<li class="" id="cubi">Opción 1</li>
<li class="" id="cubi">Opción 1</li>
<li class="" id="cubi">Opción 3</li>
<li class="" id="cubi">Opción 4</li>
<li class="" id="cubi">Opción 5</li>
<li class="" id="cubi">Opción 6</li>
<li class="" id="cubi">Opción 7</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("ul.cubi li:first").addClass("[B][COLOR="Red"]active[/COLOR][/B]");
$("ul.cubi li").click(function()
{
$("#cubi").removeClass("[B][COLOR="Red"]active[/COLOR][/B]");
$(this).addClass("[B][COLOR="Red"]active[/COLOR][/B]");
$(activeTab).fadeIn();
return false;
});
});
</script>