Question

所以我有2个链接，我想在javascript打开时显示，并在关闭时隐藏，当javascript关闭时，我想用noscript标签显示其他2个链接。

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

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

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

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

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

如果有人能指出我正确的方向去解决这个问题或者给我一个简单的代码片段，我真的很感激。谢谢！

Answer 1

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

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

使用Javascript显示链接 - 只有在Javascript打开时才会显示它们，当然
```
<script type="text/javascript">
     document.getElementById('link1').style.display="block";
     document.getElementById('link2').style.display="block";
</script>
```
根据您的需要，您可以使用任何其他display属性（默认情况下链接为inline，我在此处添加block，根据您的需要使用。）
添加noscript内容 - 仅在Javascript关闭时可见
```
<noscript>
-two other links-
</noscript>
```

Answer 2

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

Answer 3

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

DEMO

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

3 个答案: