logo标签列表

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

javascripthtmlnoscript
3
如果JavaScript开启，我想展示两个链接并在关闭时隐藏，当JavaScript关闭时，我想用noscript标签替换成另外两个链接。
目前我所拥有的是：
-js here- 如果js开启则显示2个链接并在关闭时隐藏 -js here-
-noscript- 链接1 链接2 -noscript-
我只有PHP经验，不太熟悉JavaScript。
最好的方法是什么？应该有一种JavaScript函数来使show/hide功能工作吗？但是如果JavaScript关闭，如何运行函数来隐藏链接？
如果有人可以指导我正确的方向或提供一个简单的代码片段，我会非常感激。谢谢！
3个回答
3

  1. Hide the links using CSS - not visible by default

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

  2. Show the links using Javascript - they are only visible if Javascript is on, of course

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

    Depending on what you need, you can use any other display property (link is inline by default, I added block here, use whichever you need).

  3. Add the noscript stuff - only visible when Javascript is off

    <noscript>
-two other links-
</noscript>
3
我经常看到这个使用CSS类在BODY标签上完成。例如：
<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的浏览器，将添加
+1 这是一个很棒的技巧。唯一的弱点是它可能会破坏设置在 body 上的其他类。 - kapa
@bažmegakapa - 如果你有一堆 BODY CSS 选择器，最好定义一个在加载时被移除的 noscript CSS 类。 - Mike Christensen
这个很好用，但将它附加到body标签会给我的当前代码带来太多问题！感谢您的帮助！ - Kevin Jung
@usr122212 - 如果只有一两个链接，那么这可能有些过度了。 - Mike Christensen
0

您也可以不使用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";​

演示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接