Skip to main content
3 de 3
se añadieron 52 caracteres en el cuerpo
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25

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);
      });
    });

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')).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>

Miguel
  • 1.5k
  • 1
  • 21
  • 53