为什么我用于更改（onclick）div 不透明度的 javascript 代码失败？

Question

<a id = "click_show_more" href = "" onclick = "showMore()">
    <li id = "more">
    MORE
    </li>
</a>
<div id = "more_hidden">
    <ul id = "list_hidden">
    <li>EFG</li>
    <li>ABC</li>
    </ul>
</div>

以上是我的html代码。当单击 ID 为“click_show_more”的链接“MORE”时，我想调用 javascript 函数“showMore()”。

这是我的 javascript 代码。

function showMore() {
    var moreShow = document.getElementById('more_hidden');
    moreShow.style.opacity = 0.8;
}

我不知道为什么这段代码会失败。当我点击链接时没有任何反应。

请帮我弄清楚。非常感谢！

Answer 1

从链接中删除href 属性或将其设置为# 之类的内容，这样页面就不会被加载。您正在链接到另一个页面（或同一页面）。

此外，您的 html 无效。 <li> 不属于 <a> 的子级。

查看此演示并修正您的标记，展示带 href 的链接与删除链接之间的区别。 http://jsbin.com/iJEDiku/2/edit

请不要使用内联 javascript（如您的 html 中的 onclick）。在这里研究这个：Why is inline JS bad?

这是您遵循更好做法的代码。 Live demo here (click).

标记：

<a id="change-opacity">Click here to change opacity.</a>
<div id="opacity-gets-changed">
  <ul>
    <li>EFG</li>
    <li>ABC</li>
  </ul>
</div>

JavaScript：

var a = document.getElementById('change-opacity');
var div = document.getElementById('opacity-gets-changed');

a.addEventListener('click', function() {
  div.style.opacity = 0.4;
});