使用jQuery show（）顯示div - JS禁用的會發生什麼？

我的網站上有一個模塊，加載起來很奇怪，所以我想在頁面加載時隱藏div，然後在準備好的文檔上顯示它。以下（簡化）代碼工作得很好：使用jQuery show（）顯示div - JS禁用的會發生什麼？

<div class="slideshow" style="display:none;"> 
    This div should be hidden during load 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.slideshow').show(); 
    }); 
</script>

這按預期工作。但是JavaScript禁用的用戶會發生什麼？ div會對他們隱瞞嗎？我如何確保所有用戶都能看到小部件？

來源

2011-05-31 Erik J

一個很常見的方法是，將.nojs類添加到您的<body>或<html>元素，並通過Javascript將其刪除。負載。通過CSS這樣你可以簡單的處理這兩種不同的狀態：

.slideshow { 
    display: none; 
} 

html.nojs .slideshow { 
    display: block; 
}

可能會想嘗試http://www.modernizr.com/在這方面。

來源

2011-05-31 19:44:51 polarblau

您應該從div中刪除display：none樣式，並將其明確隱藏在document.ready函數中。這樣，沒有JavaScript，它將從一開始就可見。

來源

2011-05-31 19:35:10

但是，如果他也在document.ready中顯示此元素，那麼如果您同時隱藏它並將其顯示出來，它將永遠不會「隱藏」。 – 2011-05-31 19:36:32

公平評論馬特 - 但我假設，因爲這是一個進展的div會有其他事情發生在document.ready中，之後div將被顯示。 – 2011-06-01 09:31:54

你也有輕微的閃爍許多系統，其中元素可見一瞬間，然後消失。 – ventaur 2011-06-01 15:26:54

如果他們已禁用JavaScript，它將不會顯示......您可以確保他們都看到它，而不是將它隱藏在第一位。

來源

2011-05-31 19:35:17 Fosco

但是禁用JavaScript的用戶會發生什麼情況？ div會對他們隱瞞嗎？

由於您必須展示div的代碼無法運行，因此它將保持隱藏狀態。

如何確保所有用戶都能看到小部件？

利用<noscript>在未啓用Javascript時將div顯示爲隱藏，或者將div加載爲可見並在加載完整頁面之前用Javascript隱藏它。

來源

2011-05-31 19:35:59

個人而言，我更喜歡使用CSS來優化這些事情。我在模板HTML body標籤內添加這行腳本。

<script type="text/javascript">document.body.className = "JS";</script>

然後，對於你描述的場景，我會在div上使用額外的CSS類，就像這樣。

<div class="slideshow initially-hidden"> 
    This div should be hidden during load 
</div>

使用匹配的樣式來說明模板中通過JavaScript添加的類。

body.JS .initially-hidden { 
    display: none; 
}

如果啓用了JavaScript，現在只有隱藏了「初始隱藏」類的元素。如果它被禁用，它們將可見。

來源

2011-05-31 19:44:23 ventaur

<div class="slideshow"> 
    This div should be hidden during load 
</div> 

<script type="text/javascript"> 
    $('.slideshow').hide(); 
    $(document).ready(function() { 
    $('.slideshow').show(); 
    }); 
</script>

來源

2011-05-31 20:33:16 user667500

使用jQuery show（）顯示div - JS禁用的會發生什麼？

回答

相關問題