爲什麼我的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; 
});