如何在JavaScript禁用時隱藏HTML的部分內容？

我正試圖適應沒有JavaScript的用戶。（順便說一下，是不是值得的今天？）如何在JavaScript禁用時隱藏HTML的部分內容？

在一個HTML文件，我想它的一部分執行，如果腳本是在，而另一部分，如果腳本是OFF。

<noscript>標籤讓我做前者，但如何實現後者？如果腳本爲off，我該如何標記HTML的一部分，以便它不被瀏覽器解析？

2009-10-16 z-boss

這裏有一個如何這可以用jQuery做的視頻教程：http://screenr.com/ya7

代碼：

<body class="noscript"> 
<script> 
$('body').removeClass('noscript'); 
</script> 
</body>

然後就是隱藏相應body.noscript下的相關內容。

編輯然而，JQuery的可能是臃腫像這樣一個小的修復，所以我建議Zauber Paracelsus' answer，因爲它不需要JQuery的。

來源

2009-10-16 11:56:26 Natrium

@ user2667066我認爲你評論了錯誤的答案，因爲這是默認的，並且確實需要JQuery。 – Natrium 2016-09-16 04:57:43

Eidited and moved，sorry – user2667066 2016-09-16 07:07:02

默認情況下，您想隱藏的位的樣式爲display:none，並使用jQuery或JavaScript將其打開。

來源

2009-10-16 11:50:08

onready event是一個好的方法去 – Ismael 2009-10-16 11:53:09

jQuery的方式：

$(document).ready(function(){ 
    $("body").removeClass("noJS"); 
});

僞CSS

body 
    .no-js-content 
     display: none; 
body.noJS 
    .main 
     display: none; 
    .no-js-content 
     display: block;

HTML

<body class="noJS"> 
    <div class="main"> 
     This will show if JavaScript is activated 
    </div> 
    <div class='no-js-content'> 
     This will show when JavaScript is disabled 
    </div> 
</body>

來源

2009-10-16 11:56:23

順便問一句，現在值得努力？

是的，這是值得憂慮的可訪問性。在可能的情況下，您應該使用漸進式增強功能，即製作無需腳本的基本版本，然後在其上添加腳本功能。

一個簡單的例子就是彈出鏈接。你可以做一個這樣的：

<a href="javascript:window.open('http://example.com/');">link</a>

然而，這個鏈接是行不通的，如果有人，比如說，中擊或嘗試書籤，或已禁用腳本等相反，你可以做同樣的事情像這樣：

<a href="http://example.com/" 
    onclick="window.open(this.href); return false;">link</a>

它仍然不是完美的，因爲你要分開的行爲和結構層，避免內聯事件處理程序，但它是更好，因爲它更容易獲得，而且不需要腳本。

來源

2009-10-16 12:02:53 slikts

你甚至不需要JavaScript。 – Joe 2009-10-16 14:11:21

我不認爲這是Reinis得到的點 – roryf 2009-10-16 14:14:20

如果內容纔有意義，瀏覽器支持JavaScript時，那麼它應該由JavaScript代碼直接插入而不是渲染。這可以通過簡單地將HTML模板作爲JavaScript代碼中的字符串來完成，或者在HTML更復雜的情況下使用Ajax。

作爲mentioned by Reinis I.這是Progressive Enhancement的想法。

關於在body標籤上使用類名稱的CSS技術，我建議以相反的方式來做這件事，並用JavaScript來爲body標籤添加'js-enabled'類，這會改變頁面CSS。這符合我上面有關保持所有初始HTML'非JavaScript友好'的評論。

來源

2009-10-16 12:14:48 roryf

我一直在尋找一種方法來做到這一點，這樣我就可以隱藏導航下拉菜單，當javascript被啓用時，導航下拉菜單變得無法使用。但是，用於更改顯示屬性的所有解決方案都不起作用。

因此，我所做的第一件事是爲下拉菜單週圍的div元素分配一個ID（ddown）。

然後，在HTML文檔的頭部部分中，我添加了這個在：

<noscript> 
    <style> 
     #ddown {display:none;} 
    </style> 
</noscript>

而這只是工作。不依賴於javascript，jquery或任何其他腳本：純粹的HTML和CSS。

來源

2012-12-13 10:25:02

這應該是默認的答案 - 簡單，並且不需要JQuery – user2667066 2016-09-16 07:07:11

由於某些原因，這是isn在我的頁面中無法正常工作。即使啓用了JS，它仍然隱藏了選擇器''。順便說一下，我的頁面是XHTML。 – alej27 2016-12-29 09:42:42

如何在JavaScript禁用時隱藏HTML的部分內容？

回答

相關問題