漸進式增強 - 不隱藏CSS元素

我經常發現自己使用jQuery顯示/隱藏元素，例如簡單的選項卡式內容區域，其中第一個選項卡可見，其他選項則不顯示，直到用javascript顯示爲止。我知道使用CSS（display：none）隱藏最初隱藏的不是好習慣，然後用JS顯示正確的，因爲非JS用戶永遠不會看到任何東西。所以默認情況下，我顯示所有，然後用JS隱藏相關的。漸進式增強 - 不隱藏CSS元素

雖然這樣做，隱藏的元素將加載，然後只在文檔準備就緒時隱藏。我怎樣才能阻止這種情況發生？有沒有辦法做到這一點，會降低優雅，但也沒有元素出現時加載，然後立即消失，因爲這看起來有點粗製濫造。

來源

2012-08-23 artparks

的一些想法......

如果你不介意的jQuery被散落各地，而不是是一個獨立文件中的所有頁面，你可以調用$（「＃divToHide」）。隱藏（）;元素出現後立即。雖然不是很好的做法。雖然這取決於用例，但如果您主要是設計人員/創建5頁手冊網站的人，您應該選擇適合自己的內容！

或者如果你是一個技術人員多一點，你可能喜歡用.live()/.livequery()搞砸，並用JS抓住元素的插入，並立即隱藏。看到這篇文章Is there a jquery event that fires when a new node is inserted into the dom?

來源

2012-08-23 11:38:11 joevallender

我看中了自己作爲一個有點抱負的技術人員的（哈！），因此將有一個看看你提到的現場功能。謝謝。 – artparks

不幸的是，Javascript的工作方式，~~這似乎不可能。有總是是第一個呈現的幀之間的一小部分時間，並在JavaScript隱藏元素被執行時~~I was wrong about that, jQuery seems to be able to do that。所以，CSS是最好的手段。幸運的是，你可以在一個臭名昭著的<noscript>標籤中添加備用CSS樣式表：

<style type="text/css"> 
    #jquery-thing { 
     display: none; 
    } 
</style> 
<noscript> 
    <style type="text/css"> 
     #jquery-thing { 
      display: block !important; 
     } 
    </style> 
</noscript>

這裏的的jsfiddle鏈接： http://jsfiddle.net/kylewlacy/dbWuc/

來源

2012-08-23 11:39:03

不完全正確，因爲您可以使用jQuery的'livequery'來攔截正在添加的節點（並對其進行修改），但是您的解決方案是一個很好的解決方案。我喜歡這種方法爲您提供了一種簡單的方法，可以爲所有您希望在腳本和非腳本瀏覽器之間不同的CSS設置單獨的樣式表。 – Thor84no

這很有趣......我不知道jQuery可以做到這一點！ –

謝謝你，css選項看起來像一個很好的回退選項 – artparks

漸進式增強 - 不隱藏CSS元素

回答

相關問題