0

我有两个 div ：#mosaic-content& #mosaic-content-1。最初，当加载时，#mosaic-content将显示一个类.active并且#mosaic-content-1将被隐藏。

我有 4 个链接：

Home
Event
Gallery
About

只有当用户点击div#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）。

有没有更好的方法来实现这一点？

4

2 回答 2

0

用于.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");
}
});
于 2013-02-20T10:49:57.457 回答
0

使用类，而不是 id。

隐藏为默认块 .mosaic-content-1：

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

显示块 .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();
      }

});
于 2013-02-20T11:30:54.523 回答