<；a href="；javascript:document.getElementById（'；morecontent1'；）.style.display='；块'&引用&燃气轮机；不起作用_Javascript_Href

<；a href="；javascript:document.getElementById（'；morecontent1'；）.style.display='；块'&引用&燃气轮机；不起作用

javascript

<；a href="；javascript:document.getElementById（'；morecontent1'；）.style.display='；块'&引用&燃气轮机；不起作用,javascript,href,Javascript,Href,我尝试了以下代码以实现阅读更多的效果： <a href="javascript:document.getElementById('morecontent1').style.display='block';">Read more</a> <div class="morecontent" id="morecontent1">Additional content 1</div> 附加内容1 但不幸的是，它不起作用：完整的内容消失，只

我尝试了以下代码以实现阅读更多的效果：

    <a href="javascript:document.getElementById('morecontent1').style.display='block';">Read more</a>
    <div class="morecontent" id="morecontent1">Additional content 1</div>


附加内容1

但不幸的是，它不起作用：完整的内容消失，只显示文本“块”。为什么？onclick中的相同代码工作正常。

将无法工作。使用点击事件触发函数，并重定向/触发书签/更改内容

   <script>
        function show(){
        javascript:document.getElementById('morecontent1').style.display='block';
        }
      </script>
      <body>
        <a type="button" onClick="show()">Read more</a>
        <div class="morecontent" id="morecontent1" style="display: none">Additional content 1</div>
      </body>


函数show（）{
javascript:document.getElementById（'morecontent1'）.style.display='block'；
}
阅读更多
附加内容1

您不应该使用内联JavaScript或内联事件处理程序，因为它们会创建难以调试的意大利面代码（如您所发现的），并且（事件处理程序）会创建全局函数包装器，将事件处理函数中的

此

绑定到

窗口，而不是DOM元素
href
属性实际上不是触发JavaScript的地方，链接的单击事件在大多数情况下都是正确的地方
这段代码可以工作，但是DIV已经是块级元素，所以单击链接实际上不会做任何事情，所以我在这个示例中添加了一个额外的样式

window.addEventListener（“DOMContentLoaded”，function（））{
var theDiv=document.getElementById（“morecontent1”）；
var theLink=document.getElementById（“链接”）；
addEventListener（“单击”，函数（）{
theDiv.style.display=“块”；
theDiv.style.border=“1px纯红”；//只是为了好玩！
});
});

附加内容1
可能重复感谢，链接中有我问题的答案。显然，以这种方式执行javascript是不可取的。