<a href="javascript:document.getElementById('morecontent1').style.display='block';"> 不工作答案

【问题标题】：<a href="javascript:document.getElementById('morecontent1').style.display='block';"> not working<a href="javascript:document.getElementById('morecontent1').style.display='block';"> 不工作
【发布时间】：2016-07-01 07:12:26
【问题描述】：

我尝试了这段代码来达到阅读更多的效果：

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

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

【问题讨论】：

Javascript: style.display:'block' doesn't work的可能重复
谢谢，在链接中有我的问题的答案。显然不推荐以这种方式执行 javascript。

标签： javascript href

【解决方案1】：

不会工作。使用点击事件触发功能并重定向/触发书签/更改内容

【讨论】：

【解决方案2】：

您不应使用内联 JavaScript 或内联事件处理程序，因为它们会创建难以调试的意大利面条式代码（如您所见），并且（事件处理程序）会创建将事件处理函数中的 this 绑定到 @987654322 的全局函数包装器@ 而不是 DOM 元素。

href 属性确实不是触发 JavaScript 的地方，链接的 点击事件 在大多数情况下是正确的地方。

此代码有效，但 DIV 已经是块级元素，因此单击链接实际上不会执行任何操作，因此我在此示例中添加了额外的样式。

window.addEventListener("DOMContentLoaded", function(){
   var theDiv = document.getElementById("morecontent1");
   var theLink = document.getElementById("link");
   
   theLink.addEventListener("click", function(){
      theDiv.style.display = "block";
      theDiv.style.border = "1px solid red";  // Just for fun!
   });

});

   <a href="#" id="link">Read more</a>
    <div class="morecontent" id="morecontent1">Additional content 1</div>

【讨论】：

【解决方案3】：

试试这个

   <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>

【讨论】：