显示div元素onClick

Question

我有两个div：#mosaic-content和#mosaic-content-1。最初，加载时，#mosaic-content将与类.active一起显示，而#mosaic-content-1将被隐藏。

我有4个链接：

Home
Event
Gallery
About

只有当用户单击About时，才会显示div #mosaic-content-1。对于所有其他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();
      }

});