Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/04/2014, 04:55
mensajeescrito
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 12 años
Puntos: 5
Menus con fade in y fade out

Hola amigos, verán tengo un pequeño problema, tengo un codigo javascript que me permite hacer fade in y fade out a una capas "divs", donde muestro información.


Y funciona bien, dicho código hace referencia a una class de un div (madre contenedora)

y este agrupa los sub divs de las opciones de menu, osea algo asi:

Código Javascript:
Ver original
  1. var ultimo=1;
  2.         $(document).ready(function(){
  3.  
  4.                 $(".menus_opcs div").click(function(){     
  5.  
  6.                 nuevo=$(this).attr("id");
  7.                 if(nuevo!=ultimo)
  8.                 {
  9.                     $("#opc_"+ultimo).fadeOut(function(){
  10.                         $("#"+ultimo).removeClass("seleccionado");
  11.                         $("#"+nuevo).addClass("seleccionado");
  12.                         $("#opc_"+nuevo).fadeIn();
  13.                         ultimo=nuevo;
  14.                     });
  15.                 }
  16.             });
  17.         });



Código HTML:
Ver original
  1. <div class="menus_opcs">
  2.  
  3.                  <div id="1">opcion 1</div>
  4.                  <div id="2">opcion 2</div>
  5.                  <div id="3">opcion 3</div>
  6.        </div>



el asunto es que necesito implementar un SEGUNDO menu de opciones, este:

Código HTML:
Ver original
  1. <div class="cont_sub_opcs">
  2.  
  3.                  <div id="4">opcion 4</div>
  4.                  <div id="5">opcion 5</div>
  5.                  <div id="6">opcion 6</div>
  6.        </div>



asi que cojo el codigo de javascript e intento inplementarle el codigo necesario para que los dos menus funcionen pero como no se javascript no me funciona.

en cualquier caso aunque esta mal lo que he hecho, les muestro acontinuacion lo que malamente he hecho a ver si alguien me puede ayudar a arreglarlo:


Código Javascript:
Ver original
  1. var ultimo=1;
  2.         $(document).ready(function(){
  3.  
  4.         $(".menus_opcs div") or $(".cont_sub_opcs div").click(function(){      
  5.  
  6.                 nuevo=$(this).attr("id");
  7.                 if(nuevo!=ultimo)
  8.                 {
  9.                     $("#opc_"+ultimo).fadeOut(function(){
  10.                         $("#"+ultimo).removeClass("seleccionado");
  11.                         $("#"+nuevo).addClass("seleccionado");
  12.                         $("#opc_"+nuevo).fadeIn();
  13.                         ultimo=nuevo;
  14.                     });
  15.                 }
  16.             });
  17.         });



Muchas gracias de antemano.