如果javascript打开/关闭，则隐藏和显示html代码

Hiding and showing html code if javascript is on/off

本文关键字：隐藏 显示 html 代码 javascript 打开 关闭 如果      更新时间：2023-09-26

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

到目前为止，我拥有的是：

-js在这里-如果js打开，则显示2个链接，禁用时隐藏-js在这里-

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

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

对此，最好的方法是什么？是否应该有某种javascript函数来实现show/hide函数？但是，如果javascript关闭，该函数将如何运行以隐藏链接？

如果有人能为我指明正确的方向，或者为我提供一个简单的代码片段，我将不胜感激。谢谢！

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

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

  2. 使用Javascript显示链接-它们只有在Javascript打开时才可见，当然是

    <script type="text/javascript">
     document.getElementById('link1').style.display="block";
     document.getElementById('link2').style.display="block";
</script>

    根据您的需要，您可以使用任何其他display属性（链接默认为inline，我在此处添加了block，使用您需要的任何属性）。

  3. 添加noscript内容-仅在Javascript关闭时可见

    <noscript>
-two other links-
</noscript>

我经常看到用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>

然后您可以使用脚本：

document.body.className = 'script';

对于支持Javascript的浏览器，将添加script CSS类，并使用BODY.script样式。否则，将使用规则的BODY样式。

然后，您可以定义希望页面上的任何元素在启用或不启用脚本的情况下如何显示。同样地，您可以颠倒这一点，给BODY一个noscript样式，然后通过脚本将其删除。

JSFiddle链接

您也可以在没有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>

JS

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";​

演示。

相关文章：