禁用 JavaScript 時如何隱藏部分 HTML？
[英]How to hide parts of HTML when JavaScript is disabled?
問題描述
我試圖適應沒有 JavaScript 的用戶。 （順便說一句，現在的努力值得嗎？）
在一個 HTML 文件中，如果腳本打開，我希望它的一部分執行，如果腳本關閉，則執行另一部分。
<noscript>標簽讓我做前者，但如何實現后者？ 如果腳本關閉，如何標記 HTML 的一部分，以便瀏覽器不會解析它？
8 個解決方案
解決方案1
49 2012-12-13 10:25:02
我一直在尋找一種方法來做到這一點，這樣我就可以隱藏一個導航下拉菜單，當啟用 javascript 時，該菜單會變得不起作用。 但是，所有更改顯示屬性的解決方案都不起作用。
所以，我首先做的是為下拉菜單周圍的 div 元素分配一個 ID (ddown)。
然后，在 HTML 文檔的 head 部分，我將其添加到：
<noscript>
<style>
#ddown {display:none;}
</style>
</noscript>
這才奏效。 不依賴於 javascript、jquery 或任何其他腳本：只是純 HTML 和 CSS。
解決方案2
10 2009-10-16 11:50:08
將您想要隱藏的位默認設置為display:none並使用 jQuery 或 JavaScript 打開它們。
解決方案3
6 已采納 2009-10-16 11:56:26
這是關於如何使用 jQuery 完成此操作的視頻教程：
http :
//screenr.com/ya7
代碼：
<body class="noscript"> <script> $('body').removeClass('noscript'); </script> </body>
然后相應地隱藏
body.noscript下的相關元素。
編輯但是，對於像這樣的小修復，JQuery 可能會變得臃腫，所以我建議Zauber Paracelsus 的答案，因為它不需要 JQuery。
解決方案4
3 2009-10-16 12:02:53
順便說一句，現在的努力值得嗎？
是的，值得擔心可訪問性。 您應該盡可能使用漸進增強，即制作一個無需腳本即可工作的基本版本，然后在其上添加腳本功能。
一個簡單的例子是彈出鏈接。 你可以做一個這樣的：
<a href="javascript:window.open('http://example.com/');">link</a>
但是，如果有人點擊中鍵或嘗試將其添加為書簽，或者禁用腳本等，則此鏈接將不起作用。相反，您可以執行以下相同的操作：
<a href="http://example.com/"
onclick="window.open(this.href); return false;">link</a>
它仍然不完美，因為您應該將行為層和結構層分開並避免使用內聯事件處理程序，但它更好，因為它更易於訪問並且不需要編寫腳本。
解決方案5
1 2009-10-16 11:56:23
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>
解決方案6
1 2009-10-16 12:14:48
如果內容只有在啟用 JavaScript 時才有意義，那么它應該由 JavaScript 代碼直接插入而不是被呈現。 這可以通過簡單地將 HTML 模板作為 JavaScript 代碼中的字符串來完成，或者如果 HTML 更復雜，則使用 Ajax。
正如Reinis I所提到的，這就是Progressive Enhancement的想法。
關於在 body 標簽上使用類名的 CSS 技術，我建議以相反的方式執行此操作，並使用 JavaScript 向 body 標簽添加一個“ js-enabled ”的類，這將改變頁面 CSS。 這符合我上面關於保持所有初始 HTML“非 JavaScript 友好”的評論。
解決方案7
0 2020-05-14 22:28:02
您可以使用 Javascript 編輯頁面的 HTML
document.querySelector('div').style.display = 'block';
div { display: none; }
<div>Div</div>
解決方案8
0 2020-05-14 22:37:28
這使得在沒有 JS 的情況下無法訪問 div 中的內容，但是使用 JS 它將內容添加到帶有 JS 的 div 中，您也可以使用 CSS 來做到這一點。 要更改 CSS 添加：
document.querySelector('style').innerHTML = 'div{}';
document.querySelector('div, #div').innerHTML = 'Div';
<div id='div'></div>
如何使用 html 和 Javascript 在特殊符號后隱藏部分文本？
[英]How to hide a parts of text after a special symbol, using html and Javascript?
如何隱藏不被包圍的某些html <noscript> 標簽是否禁用了javascript？
[英]How to hide certain html that is not surrounded by <noscript> tags if javascript is disabled?
HTML和Javascript - 如何模擬禁用的輸入（隱藏插入符號）？
[英]HTML & Javascript - how to emulate disabled input (hide caret)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.