me falta una o dos líneas en js.

Citar

Escrito el 22 Ago 2010 12:54 pm

Hola a todos!!! Hace un par de meses me metí de lleno a jquery. No soy muy versada en js y tengo un problema que no sé solucionar. En una página tengo 3 btns que al pulsarlos despliegan una div con contenidos respectivamente. El problema es que, por ejemplo, si pulsas el 1º btn y muestra su correspondiente contenido, al pulsar el 2º, el contenido de este se despliega encima del primero y así sucesivamente. Quise solucionarlo ocultando las otras div, pero no me funcionó, este es el js que tengo:

Código Javascript :

<script type="text/javascript">
      $(document).ready(function(){
         $(".btn1").click(function (){
            $("#ind").slideToggle("slow");
            visibility:true;
            (this).toggleClass("active");
            ("#colec", "#publ").hide();
         });
         $(".btn2").click(function (){
            $("#colec").slideToggle("slow");
            (this).toggleClass("active");
            ("#ind", "#publ").hide();
            visibility:true;
         });
         $(".btn3").click(function (){
            $("#publ").slideToggle("slow");
            (this).toggleClass("active");
            ("#colec", "#ind").hide();
            visibility:true;
         });
      });
   </script>

pueden ver el ejemplo online pulsando aquí
Muchas gracias desde ya. Ojalá alguien pueda explicarme qué me falta en el código js.

Por al_di

65 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Citar

Escrito el 22 Ago 2010 03:59 pm

Deberías llevar la cuenta de cuál div está siendo mostrado al momento de hacer clic en uno de los enlaces. El efecto que buscas yo lo habría hecho así:

Código HTML :

<style>
.persiana {
   display: none;
   border: 1px solid blue;
}
</style>
<script type="text/javascript">
var idx = null;
function CambiarPersiana(cual) {
   $("#"+idx).hide();
   idx = cual;
   $("#"+cual).slideDown();
}

</script>
</head>
<body>
<div style="float: left; width: 20%; border: 1px solid red;">
   <a href="#" onClick="CambiarPersiana('primero')">DIV 1</a><br />
   <a href="#" onClick="CambiarPersiana('segundo')">DIV 2</a><br />
   <a href="#" onClick="CambiarPersiana('tercero')">DIV 3</a><br />
</div>

<div style="width: 20%; border: 1px solid green; float: left;">
   <div id="primero" class="persiana">
      <p>Esto es el primer div</p>
   </div>
   <div id="segundo" class="persiana">
      <p>Esto es el segundo div</p>
   </div>
   <div id="tercero" class="persiana">
      <p>Esto es el tercer div</p>
   </div>
</div>

Quité lo que no es relevante. Los borders son para que quede claro dónde está cada cosa.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

me falta una o dos líneas en js.

Escribe una respuesta rapida