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函数或将它绑定到一个处理程序。

$('.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。

希望DIV在被点击时消失并被另一个DIV替换

1 个答案: