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

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