使用Javascript/Jquery創建高效的Tab切換

Question

注意：使用第三方選項卡系統不是一種選擇，所以請不要這麼做。

在我的頁面上，我有幾個<div>和幾個選項卡。每個div可以屬於多個選項卡。例如，所有div都屬於'All'標籤，然後一些div屬於'Today'標籤，一些屬於'Tomorrow'等。

我想要做的是，當用戶點擊Today標籤，我只想顯示屬於該標籤的div。當他點擊任何其他標籤時，前一個標籤的div應該被隱藏，並且應該顯示所選標籤的div。迄今爲止，標準標籤行爲非常標準。

然而，這是不同的是，一個div可以在多個選項卡之間共享。

我在想，無論何時選擇一個新選項卡，我都可以簡單地遍歷最後選定選項卡的所有div，隱藏它們，然後遍歷當前選項卡的div並顯示它們。

但是我想知道是否會有更高效/更少的CPU密集型方法。此外，這種方法會導致一些div被隱藏起來，只有當它們在最後一個標籤和當前標籤之間共享時纔會立即再次被淋浴。 （例如：div_111可以在今天和明天之間共享，用戶點擊Today，div_111被顯示，然後他點擊Tomorrow，div_111首先被隱藏，然後再被顯示）。

有什麼建議嗎？

Answer 1

你要注意的是重畫。當你添加或刪除一個元素時，瀏覽器必須弄清楚這個變化是如何影響頁面上的其他元素的，並相應地重新定位/調整每個元素的大小。這個過程幾乎總是DOM操作中最昂貴的部分 - 當然比找出哪些元素進入哪個標籤要昂貴。

瀏覽器嘗試優化重繪 - 儘可能少地重繪頁面，有時將多個更改分組到同一重繪中。然而，最好是把事情掌握在自己手中。通過首先從DOM中刪除父節點，然後進行所有更改，然後重新添加它，您可以確保不超過兩次重繪，無論您添加或刪除多少個節點。這裏有一個簡單的例子：根據您的佈局，消除container可能會導致它下面的內容瞬間跳起來

var container = document.getElementById('container'), 
    buffer = document.createDocumentFragment(), 
    newNodes = tabs[selection], // an array or object, generated at page load, 
           // containing all divs that show up in this tab 
    i, div; 
document.body.removeChild(container); 
for (i = 0; div = newNodes[i]; i++) { 
    buffer.appendChild(div); // if div is in container then it will be 
          // automatically removed 
} 
container.innerHTML = ''; // probably more efficient to remove nodes individually 
container.appendChild(buffer); 
document.body.appendChild(container); 

。如果你想要一個拋光的外觀，你可以修復container父母的高度，或者在container.parentNode.replaceNode()的位置插入一個佔位符。

如果你最小化重繪，那麼你不應該有任何效率問題。但是，如果你仍然想調整，當然，優化你的內容插入邏輯。最簡單的方法可能是將多個選項卡中顯示的內容與單個選項卡相關聯的內容分隔開，可能通過對每種內容類型使用不同的容器。請記住，最好的解決方案是不會比所需要的更普遍的解決方案。