Skip to main content
se añadieron 2602 caracteres en el cuerpo
Origen Enlace
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29

$("#div-prueba-1").on('click', function() {
  $("#div-prueba-1").toggleClass("show");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-2").on('click', function() {
  $("#div-prueba-2").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-3").on('click', function() {
  $("#div-prueba-3").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-4").on('click', function() {
  $("#div-prueba-4").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
});
.box-general {
  background-color: #f4f4f4;
  width: 100%;
  height: 100vh;
  position: relative;
}

.box-general .box-cont {
  transition: all 0.6s linear;
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.box-general .box-cont.show {
  width: 100%;
  left: 0;
}

.box-general .box-cont.hide {
  visibility: hidden;
  opacity: 0;
}

.box-general>div:first-child {
  background-color: #cccccc;
  left: 0;
}

.box-general>div:nth-child(2) {
  background-color: #999999;
  left: 25%;
}

.box-general>div:nth-child(3) {
  background-color: #666666;
  left: 50%;
}

.box-general>div:last-child {
  background-color: #333333;
  left: 75%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-general">
  <div id="div-prueba-1" class="box-cont">
    <div class="box-display"></div>
    <div class="cont-inter">
      Contenido
    </div>
  </div>
  <div id="div-prueba-2" class="box-cont">
    perro 2
  </div>
  <div id="div-prueba-3" class="box-cont">
    perro 3
  </div>
  <div id="div-prueba-4" class="box-cont">
    perro 4
  </div>
</div>


$("#div-prueba-1").on('click', function() {
  $("#div-prueba-1").toggleClass("show");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-2").on('click', function() {
  $("#div-prueba-2").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-3").on('click', function() {
  $("#div-prueba-3").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-4").on('click', function() {
  $("#div-prueba-4").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
});
.box-general {
  background-color: #f4f4f4;
  width: 100%;
  height: 100vh;
  position: relative;
}

.box-general .box-cont {
  transition: all 0.6s linear;
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.box-general .box-cont.show {
  width: 100%;
  left: 0;
}

.box-general .box-cont.hide {
  visibility: hidden;
  opacity: 0;
}

.box-general>div:first-child {
  background-color: #cccccc;
  left: 0;
}

.box-general>div:nth-child(2) {
  background-color: #999999;
  left: 25%;
}

.box-general>div:nth-child(3) {
  background-color: #666666;
  left: 50%;
}

.box-general>div:last-child {
  background-color: #333333;
  left: 75%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-general">
  <div id="div-prueba-1" class="box-cont">
    <div class="box-display"></div>
    <div class="cont-inter">
      Contenido
    </div>
  </div>
  <div id="div-prueba-2" class="box-cont">
    perro 2
  </div>
  <div id="div-prueba-3" class="box-cont">
    perro 3
  </div>
  <div id="div-prueba-4" class="box-cont">
    perro 4
  </div>
</div>

se añadieron 974 caracteres en el cuerpo
Origen Enlace

espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW.

Hace lo que quiero, pero creo que se puede simplificar, pensaría que es lo correcto.

Del ejemplo que puse esta seria la parte :

$("#div-prueba-1").on('click', function () {
        $("#div-prueba-1").toggleClass("show");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-2").on('click', function () {
        $("#div-prueba-2").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-3").on('click', function () {
        $("#div-prueba-3").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-4").on('click', function () {
        $("#div-prueba-4").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
    });

espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW

espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW.

Hace lo que quiero, pero creo que se puede simplificar, pensaría que es lo correcto.

Del ejemplo que puse esta seria la parte :

$("#div-prueba-1").on('click', function () {
        $("#div-prueba-1").toggleClass("show");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-2").on('click', function () {
        $("#div-prueba-2").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-3").on('click', function () {
        $("#div-prueba-3").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-4").on('click', function () {
        $("#div-prueba-4").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
    });
Origen Enlace

Simplificar jquery

espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW