当前位置：文江博客话题详情

禁用 JavaScript 时如何隐藏部分 HTML？

发布于 2024-08-07 12:10:18 字数 221 浏览 7 评论 0原文

我正在尝试适应没有 JavaScript 的用户。（顺便问一下，现在值得付出努力吗？）

在一个 HTML 文件中，如果脚本打开，我希望执行其中的一部分，如果脚本关闭，则执行另一部分。

标签让我可以做到前者，但如何实现后者呢？如果脚本关闭，如何标记 HTML 的一部分，使其不会被浏览器解析？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很酷又爱笑 2024-08-14 12:10:18

我一直在寻找一种方法来做到这一点，这样我就可以隐藏一个导航下拉菜单，当启用 JavaScript 时，该菜单会变得不起作用。然而，所有改变显示属性的解决方案都不起作用。

因此，我首先为下拉菜单周围的 div 元素分配了一个 ID (ddown)。

然后，在 HTML 文档的 head 部分中，我将其添加到：

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

这样就起作用了。不依赖 javascript、jquery 或任何其他脚本：仅是纯 HTML 和 CSS。

I had been looking around for a way to do this so that I could hide a navigation dropdown menu that gets rendered nonfunctional when javascript is enabled. However, all of the solutions for changing the display property did not work.

So, what I did first was assigned an ID (ddown) to the div element surrounding the dropdown menu.

Then, within the head section of the HTML document, I added this in:

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

And that just worked. No dependency on javascript, jquery, or any other scripting: just pure HTML and CSS.

回复收藏 0 原文

拍不死你 2024-08-14 12:10:18

默认将您想要隐藏的位设置为 display:none 样式，并使用 jQuery 或 JavaScript 将其打开。

回复收藏 0 原文

一曲琵琶半遮面シ 2024-08-14 12:10:18

~~这里有一个关于如何使用 jQuery 完成此操作的视频教程：http://screenr.com/ya7~~

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

~~然后相应地隐藏body.noscript下的相关元素即可。~~

编辑
然而，对于像这样的小修复，JQuery 可能会显得臃肿，所以我建议 Zauber Paracelsus 的答案，因为它不需要jQuery。

~~here's a video tutorial on how this can be done with jQuery: http://screenr.com/ya7~~

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

~~And then just hide the relevant elements under body.noscript accordingly.~~

edit
However, JQuery might be bloated for a small fix like this one, so I suggest Zauber Paracelsus' answer since it does not require JQuery.

回复收藏 0 原文

初心未许 2024-08-14 12:10:18

顺便说一句，值得付出努力吗？
现在？

是的，可访问性值得担心。您应该尽可能使用渐进增强，即制作一个无需脚本即可运行的基本版本，然后在其之上添加脚本功能。

一个简单的例子是弹出链接。您可以像这样制作一个：

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

但是，如果有人单击鼠标中键或尝试为其添加书签，或者禁用了脚本等，则此链接将无法工作。相反，您可以这样做相同的事情：

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

它仍然不完美，因为您应该将行为层和结构层分开并避免内联事件处理程序，但这样做更好，因为它更易于访问并且不需要编写脚本。

By the way, is it worth the effort
nowadays?

Yes, it's worth worrying about accessibility. You should use progressive enhancement where possible, i.e. make a basic version that works without scripting and then add the scripting functionality on top of it.

A simple example would be a pop-up link. You could make one like this:

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

However, this link wouldn't work if someone, say, middle-clicked or tried to bookmark it, or had scripts disabled etc. Instead, you could do the same thing like this:

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

It's still not perfect, because you should separate the behavior and structure layers and avoid inline event handlers, but it's better, because it's more accessible and doesn't require scripting.

回复收藏 0 原文

无人问我粥可暖 2024-08-14 12:10:18

如果内容仅在启用 JavaScript 时才有意义，则应由 JavaScript 代码直接插入而不是渲染。这可以通过简单地将 HTML 模板作为 JavaScript 代码中的字符串来完成，或者如果 HTML 更复杂，则可以使用 Ajax 来完成。

正如 Reinis I 提到的。这是渐进增强的想法。

关于在 body 标签上使用类名的 CSS 技术，我建议以相反的方式执行此操作，并使用 JavaScript 将“js-enabled”类添加到 body 标签，这将改变页面CSS。这符合我上面关于保持所有初始 HTML“非 JavaScript 友好”的评论。

回复收藏 0 原文

浅听莫相离 2024-08-14 12:10:18

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>

The jQuery way:

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

Pseudo 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>

回复收藏 0 原文

楠木可依 2024-08-14 12:10:18

您可以使用 Javascript 编辑页面的 HTML

document.querySelector('div').style.display = 'block';

div {
  display: none;
}

<div>Div</div>

Try it with JS and the without JS.

You could edit the HTML of the page with Javascript

document.querySelector('div').style.display = 'block';

div {
  display: none;
}

<div>Div</div>

Try it with JS and the without JS.

回复收藏 0 原文

長街聽風 2024-08-14 12:10:18

这使得 div 内的内容在没有 JS 的情况下无法访问，但使用 JS 时，它会使用 JS 将内容添加到 div 中，您也可以使用 CSS 来做到这一点。
要更改 CSS 添加：

document.querySelector('style').innerHTML = 'div{}';

document.querySelector('div, #div').innerHTML = 'Div';

<div id='div'></div>

This makes the content inside the div inaccessible without JS but with JS it adds the content into the div with JS and you can also do that with the CSS.
To change the CSS add:

document.querySelector('style').innerHTML = 'div{}';

document.querySelector('div, #div').innerHTML = 'Div';

<div id='div'></div>

回复收藏 0 原文

~没有更多了~

关于作者

一身软味

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

禁用 JavaScript 时如何隐藏部分 HTML？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

禁用 JavaScript 时如何隐藏部分 HTML？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。