在屏幕上顯示div元素

我有兩個div：#mosaic-content & #mosaic-content-1。最初，當負載，#mosaic-content將顯示類.active和#mosaic-content-1將被隱藏。在屏幕上顯示div元素

我有4個環節：

Home 
Event 
Gallery 
About

股利只有當用戶點擊About#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）。

有沒有更好的方法來實現這個目標？

來源

2013-02-20 xan

喜。。can you plz provide me .active class code ... – Kvadiyatar 2013-02-20 11:01:36

.toggle（）（http://api.jquery.com/toggle/）可以更有效率嗎？無論如何，我都傾向於隱藏/顯示內容。 :) – ianbailey 2013-02-20 11:57:21

使用.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-20 10:49:57 Cris

如果這會加快速度，我會感到驚訝。 '（'：visible'）'比顯示，隱藏和添加類要耗費更多的資源。 – lonesomeday 2013-02-20 10:51:40

如果他每次顯示該項目時，還添加活動類，那麼爲什麼不檢查hasClass（'active'）而不是（'：visible'）？ – 2013-02-20 10:56:25

使用類，而不是ID的。

隱藏作爲默認塊.mosaic內容-1：

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

後顯示塊.mosaic內容

$(".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-20 11:30:54 Eugene

在屏幕上顯示div元素

回答

相關問題