Question

我有两个div：#mosaic-content＆amp; #mosaic-content-1。最初，当加载时，#mosaic-content将显示为.active类，#mosaic-content-1将被隐藏。

我有4个链接：

Home
Event
Gallery
About

只有当用户点击#mosaic-content-1时，才会显示div About。对于所有其他3次点击，它必须保持隐藏状态。我写了以下代码来实现这个目标：

$(function () {
    $("#mosaic-content").addClass("active");
    $("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {    
    $("#mosaic-content").show();
    $("#mosaic-content").addClass("active");
    $("#mosaic-content-1").hide();
    $("#mosaic-content-1").removeClass("active");

});
$("#about").click(function () { 
    $("#mosaic-content").hide();
    $("#mosaic-content").removeClass("active");
    $("#mosaic-content-1").show();
    $("#mosaic-content-1").addClass("active");
});

但是，在上面的代码中，如果显示#mosaic-content，然后用户点击事件或图库，则会再次运行这些功能，这会使我的网站有点慢（divs已满很多HTML content）。

有没有更好的方法来实现这个目标？

Answer 1

使用.is(':visible')检查div是否已经可见

$(function () {
    $("#mosaic-content").addClass("active");
    $("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {   
if(!$("#mosaic-content").is(':visible')){
    $("#mosaic-content").show();
    $("#mosaic-content").addClass("active");
    $("#mosaic-content-1").hide();
    $("#mosaic-content-1").removeClass("active");
}

});
$("#about").click(function () { 
if($("#mosaic-content").is(':visible')){
    $("#mosaic-content").hide();
    $("#mosaic-content").removeClass("active");
    $("#mosaic-content-1").show();
    $("#mosaic-content-1").addClass("active");
}
});

Answer 2

使用类，而不是id。

隐藏为默认阻止.mosaic-content-1：

$(".mosaic-content-1").hide();

show block .mosaic-content

之后

$(".mosaic-content").show();

块导航中的Onlick功能：

$(".navigation a").click(function() {
   if(!$(this).hasClass("about");) {
      $(".navigation a").removeClass("active");
      $(this).addClass("active");
      $(".mosaic-content-1").hide();
      $(".mosaic-content").show();
      } else {
          $(".navigation a").removeClass("active");
          $(this).addClass("active");
          $(".mosaic-content").hide();
          $(".mosaic-content-1").show();
      }

});

在onClick上显示div元素

2 个答案: