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;
});

为什么我的javascript代码更改（onclick）div opacity失败？

1 个答案: