Skip to main content
se añadieron 52 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25
   $(document).ready(function () {
      $("#depilacion").on( "click", function () {        
          $("#divMenu div").not($('#ContenidoDepilacion')).hidefadeOut(500"slow");      .promise().done(function () {
          $('#ContenidoDepilacion').showfadeIn(500"slow");        
       });
      });

$("#lifting").on( "click", function () {
        $("#divMenu div").not($('#ContenidoLifting')).hidefadeOut(500"slow");      .promise().done(function () {
        $('#ContenidoLifting').showfadeIn(500"slow"); 
      });
      });
$("#lipoescultura").on( "click", function () {
         $("#divMenu div").not($('#ContenidoLipoescultura')).hidefadeOut(500"slow");      .promise().done(function () {
          $('#ContenidoLipoescultura').showfadeIn(500"slow"); 
      });
        });
$("#tattoos").on( "click", function () {
        $("#divMenu div").not($('#ContenidoTattoos')).hidefadeOut(500"slow");      .promise().done(function () {
        $('#ContenidoTattoos').showfadeIn(500"slow"); 
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>
$(document).ready(function(){
      $("#depilacion").on( "click", function() {        
          $("#divMenu div").not($('#ContenidoDepilacion')).hide(500);        
          $('#ContenidoDepilacion').show(500);        
       });
      $("#lifting").on( "click", function() {
        $("#divMenu div").not($('#ContenidoLifting')).hide(500);        
        $('#ContenidoLifting').show(500); 
      });
      $("#lipoescultura").on( "click", function() {
         $("#divMenu div").not($('#ContenidoLipoescultura')).hide(500);        
          $('#ContenidoLipoescultura').show(500); 
      });
        $("#tattoos").on( "click", function() {
        $("#divMenu div").not($('#ContenidoTattoos')).hide(500);        
        $('#ContenidoTattoos').show(500); 
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>
   $(document).ready(function () {
$("#depilacion").on("click", function () {
    $("#divMenu div").not($('#ContenidoDepilacion')).fadeOut("slow").promise().done(function () {
        $('#ContenidoDepilacion').fadeIn("slow");
    });
});

$("#lifting").on("click", function () {
    $("#divMenu div").not($('#ContenidoLifting')).fadeOut("slow").promise().done(function () {
        $('#ContenidoLifting').fadeIn("slow");
    });
});
$("#lipoescultura").on("click", function () {
    $("#divMenu div").not($('#ContenidoLipoescultura')).fadeOut("slow").promise().done(function () {
        $('#ContenidoLipoescultura').fadeIn("slow");
    });
});
$("#tattoos").on("click", function () {
    $("#divMenu div").not($('#ContenidoTattoos')).fadeOut("slow").promise().done(function () {
        $('#ContenidoTattoos').fadeIn("slow");
    });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>
se añadieron 2211 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25

Edito

Puedes reducir el código poniendo tus divs dentro de otro div (divMenu) y filtrando con el selector .not

$(document).ready(function(){
      $("#depilacion").on( "click", function() {        
          $("#divMenu div").not($('#ContenidoDepilacion')).hide(500);        
          $('#ContenidoDepilacion').show(500);        
       });
      $("#lifting").on( "click", function() {
        $("#divMenu div").not($('#ContenidoLifting')).hide(500);        
        $('#ContenidoLifting').show(500); 
      });
      $("#lipoescultura").on( "click", function() {
         $("#divMenu div").not($('#ContenidoLipoescultura')).hide(500);        
          $('#ContenidoLipoescultura').show(500); 
      });
        $("#tattoos").on( "click", function() {
        $("#divMenu div").not($('#ContenidoTattoos')).hide(500);        
        $('#ContenidoTattoos').show(500); 
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>

Edito

Puedes reducir el código poniendo tus divs dentro de otro div (divMenu) y filtrando con el selector .not

$(document).ready(function(){
      $("#depilacion").on( "click", function() {        
          $("#divMenu div").not($('#ContenidoDepilacion')).hide(500);        
          $('#ContenidoDepilacion').show(500);        
       });
      $("#lifting").on( "click", function() {
        $("#divMenu div").not($('#ContenidoLifting')).hide(500);        
        $('#ContenidoLifting').show(500); 
      });
      $("#lipoescultura").on( "click", function() {
         $("#divMenu div").not($('#ContenidoLipoescultura')).hide(500);        
          $('#ContenidoLipoescultura').show(500); 
      });
        $("#tattoos").on( "click", function() {
        $("#divMenu div").not($('#ContenidoTattoos')).hide(500);        
        $('#ContenidoTattoos').show(500); 
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>

Origen Enlace
Miguel
  • 1.5k
  • 1
  • 21
  • 53

Lo solucione así pero no se si es la forma correcta:

  $(document).ready(function(){
      $("#depilacion").on( "click", function() {
        $('#ContenidoDepilacion').show(500,);
        $('#ContenidoLifting').hide(500,);
        $('#ContenidoLipoescultura').hide(500,);
        $('#ContenidoTattoos').hide(500,);
       });
      $("#lifting").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').show(500);
        $('#ContenidoLipoescultura').hide(500);
        $('#ContenidoTattoos').hide(500);
      });
      $("#lipoescultura").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').hide(500);
        $('#ContenidoLipoescultura').show(500);
        $('#ContenidoTattoos').hide(500);
      });
      $("#tattoos").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').hide(500);
        $('#ContenidoLipoescultura').hide(500);
        $('#ContenidoTattoos').show(500);
      });
    });