提醒的<a>標籤

Question

我有一個Java腳本代碼如下的innerHTML，它應該改變「一個」標籤的顏色和

警報自己內心的HTML：

function change(n){ 
    for(i=1;i<=6;i++){ 
     document.getElementById('nav_'+i).style.color='#666666';} 
     document.getElementById('nav_'+n).style.color='#FEA563'; 
     var p=document.getElementById('nave_'+n).innerHTML; 
     alert(p); 
    } 
} 

的HTML如下所示。但警報不起作用。

<div id="container"> 
    <div id="top_nav"> 
    <a id="nav_1" onclick="change(1);" href="#">aaaa</a> | 
    <a id="nav_2" onclick="change(2);"href="#">bbbb</a> | 
    <a id="nav_3" onclick="change(3);"href="#">ccccc</a> | 
    <a id="nav_4" onclick="change(4);"href="#">ddddd</a> | 
    <a id="nav_5" onclick="change(5);"href="#">eeeee</a> | 
    <a id="nav_6" onclick="change(6);"href="#">fffff</a> 
    </div> 

如何訪問我點擊的「a」標籤的innerHTML？

Answer 1

一個更簡單的解決辦法是做到以下幾點：

function change(elem) { 
 
    var a = document.getElementById('top_nav').children 
 
    for (var i = 0; i < a.length; i++) { 
 
     a[i].style.color = '#666666'; 
 
    } 
 
    elem.style.color = '#FEA563'; 
 
    alert(elem.innerHTML); 
 
}

<div id="container"> 
 
    <div id="top_nav"> 
 
     <a id="nav_1" onclick="change(this)" href="#">aaaa</a> | 
 
     <a id="nav_2" onclick="change(this)" href="#">bbbb</a> | 
 
     <a id="nav_3" onclick="change(this)" href="#">ccccc</a> | 
 
     <a id="nav_4" onclick="change(this)" href="#">ddddd</a> | 
 
     <a id="nav_5" onclick="change(this)" href="#">eeeee</a> | 
 
     <a id="nav_6" onclick="change(this)" href="#">fffff</a> 
 
    </div> 
 
</div>

傳遞this到onclick事件處理使得它知道被點擊的元素。而且，由於您所有的a元素都被分組在top_navdiv之內，所以您可以簡單地循環瀏覽所有孩子以更改顏色。

這裏有一個工作小提琴http://jsfiddle.net/JohnnyEstilles/m1960yyL/。