0

私は 2 つの div を持っています: #mosaic-content& #mosaic-content-1. 最初にロードする#mosaic-contentと、クラスとともに表示され、.active非表示#mosaic-content-1になります。

私は4つのリンクを持っています:

Home
Event
Gallery
About

div#mosaic-content-1は、ユーザーが をクリックしたときにのみ表示する必要があります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が表示されてからユーザーがイベントまたはギャラリーをクリックすると、関数が再度実行されるため、Web サイトが少し遅くなります (divs多くの でいっぱいですHTML content)。

これを達成するためのより良い方法はありますか？

4

2 に答える 2

0

ID ではなく、クラスを使用します。

デフォルトのブロック .mosaic-content-1 として非表示:

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

ブロック .mosaic-content を表示した後

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

ブロック ナビゲーションのオンリック機能:

$(".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 に答える
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 に答える