希望DIV在单击并替换为另一个DIV时消失

Question

我试图让一个DIV单击时被另一个DIV代替。 现在，我有了它，以便在单击其他DIV时出现第一个DIV，然后消失，但是当我尝试让其他DIVS在单击时出现时，第一个DIV随之弹出。 这是指向页面http://melinajesser.com/ArchFitters/womens.php的链接，您可以单击“步行”图像，它很好，但单击季节性图像，它会弄乱。 我怎样才能解决这个问题？

<div id="infor1">
  <div class="side col-md-4 align-center">
    <p>Full EVA Midsole Provides Signature Hoka Cushioning</p>
    <img src="images/valorwomensside.png">
  </div>

  <div class="bottom col-md-4 align-center">
    <p>Early-Stage Meta-Rocker Provides Propulsion</p>
    <img src="images/valorwomensbottom.png">
  </div>

  <div class="description col-md-4 align-center">
    <p>Comfort reigns supreme in the VALOR from the Comfort-Frame lycra upper to the Ultrasize midsole that provides the signature HOKA ONE ONE cushioned ride. Built on an Early-Stage-Meta-Rocker for propulsion, the Valor is a smooth-riding shoe that is best suited for running on man-made surfaces.</p>
  </div>
</div>

<div id="infor2">
  <div class="side col-md-4 align-center">
    <p>Lightweight, padded contour cork footbed</p>
    <img src="images/trulieside.png">        
  </div>

<div class="bottom col-md-4 align-center">
    <p>Lightweight Rubber</p>
    <img src="images/truliebottom.png">
</div>

<div class="description col-md-4 align-center">
    <p>A truly scrumptious leather sandal made in Spain. Man made woven hook and loop straps provide a custom feeling fit. Incredible comfort comes from the lightweight, padded, contour cork-polyurethane footbed lined in suede.</p>
  </div>
</div>

$(document).ready(
 function(){
    $("#walk").click(function () {
        $("#infor1").toggle("slow");
    });

 });

$(document).ready(
 function(){
    $("#run").click(function () {
        $("#infor1").fadeToggle();
    }); 
 });

$(document).ready(
 function(){
    $("#seas").click(function () {
        $("#infor1").fadeToggle();
    });
 });

$(document).ready(
 function(){
    $("#seas").click(function () {
        $("#infor2").toggle("slow");
    });

 });

$(document).ready(
 function(){
    $("#run").click(function () {
        $("#infor2").fadeToggle();
    }); 
 });

$(document).ready(
 function(){
    $("#walk").click(function () {
        $("#infor2").fadeToggle();
    });
 });

Answer 1

无需将每个click函数包装在一个文档中就可以将它们放入同一文档中，也就是说，您应该使用一个类来附加click函数或将其绑定到处理程序。

$('.toggle').on('click', function(e){
   //do stuff here
});

http://jsfiddle.net/6w0v8nw3/

$(document).ready(function () { $('.toggle').on('click', function (e) { e.preventDefault(); var id = $(this).attr('href'); if ($(id).is(':visible')) { $(id).slideUp('fast'); return false; } $('.info:visible').slideUp('fast'); $($(this).attr('href')).slideDown('slow'); }); });

有一个链接，将锚标记设为要切换的容器的ID。