在javascript打开/关闭时隐藏和显示html代码_Javascript_Html_Noscript

在javascript打开/关闭时隐藏和显示html代码

javascript html

在javascript打开/关闭时隐藏和显示html代码,javascript,html,noscript,Javascript,Html,Noscript,所以我有两个链接，我想显示javascript是否打开，关闭时隐藏，当javascript关闭时，我想用noscript标记在它的位置显示另外两个链接到目前为止，我得到的是： -这里是js- 打开js时显示2个链接，禁用js时隐藏 -这里是js- -noscript- 链接1 链接2 -noscript- 我只有PHP方面的经验，对javascript不是很熟悉最好的办法是什么？是否应该有某种javascript函数来实现显示/隐藏功能？但是如果javascript关闭，该函数将如何运行以隐

所以我有两个链接，我想显示javascript是否打开，关闭时隐藏，当javascript关闭时，我想用noscript标记在它的位置显示另外两个链接

到目前为止，我得到的是：

-这里是js- 打开js时显示2个链接，禁用js时隐藏 -这里是js-

-noscript- 链接1 链接2 -noscript-

我只有PHP方面的经验，对javascript不是很熟悉

最好的办法是什么？是否应该有某种javascript函数来实现显示/隐藏功能？但是如果javascript关闭，该函数将如何运行以隐藏链接

如果有人能给我指出正确的方向，或者给我提供一个简单的代码片段，我会非常感激。谢谢

使用CSS隐藏链接-默认情况下不可见

<a id="link1" href="#" style="display: none">Script link 1</a>
<a id="link2" href="#" style="display: none">Script link 2</a>

我经常看到在BODY标签上使用CSS类来实现这一点。例如：

<html>
<head>
  <style type="text/css">
    BODY A { display: none; }
    BODY.script A { display: inherit; }
  </style>
</head>
<body>
    <a href="#">Shows with Script</a>
</body>
</html>

对于支持Javascript的浏览器，将添加

script

CSS类，并使用

BODY.script

样式。否则，将使用regulard

BODY

样式

然后，您可以准确地定义在启用或不启用脚本的情况下页面上任何元素的显示方式。类似地，您可以将其反转，并为主体提供一个

noscript

样式，然后通过脚本将其删除

您也可以在不使用noscript的情况下执行，如下所示

HTML

<a href="" style="display:none" id='javascript_link1'>JS link-1</a>
<a href="" style="display:none" id='javascript_link2'>JS link-2</a>
<a  href="" id='nonjs_link1'>link-1</a>
<a href="" id='nonjs_link2'>link-2</a>

+1这是一种巧妙的技术。唯一的缺点是它可能会破坏正文上设置的其他类。@bažmegakapa-同意，如果你有一堆

body

CSS选择器，最好定义一个

noscript

CSS类，该类在加载时会被删除。这很有效，但将其附加到正文标记会给我当前的代码带来太多问题！谢谢你的帮助@usr122212-是的，如果它只是一个或两个链接，那么这可能是矫枉过正。

<html>
<head>
  <style type="text/css">
    BODY A { display: none; }
    BODY.script A { display: inherit; }
  </style>
</head>
<body>
    <a href="#">Shows with Script</a>
</body>
</html>

document.body.className = 'script';

<a href="" style="display:none" id='javascript_link1'>JS link-1</a>
<a href="" style="display:none" id='javascript_link2'>JS link-2</a>
<a  href="" id='nonjs_link1'>link-1</a>
<a href="" id='nonjs_link2'>link-2</a>

document.getElementById('javascript_link1').style.display="block";
document.getElementById('javascript_link2').style.display="block";
document.getElementById('nonjs_link1').style.display="none";
document.getElementById('nonjs_link2').style.display="none";