javascript - 提醒标签的innerHTML

Question

我有一个java脚本代码如下，它应该改变“a”标签的颜色和

提醒他们的内部 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_nav div 内，因此您可以简单地循环遍历它的所有子元素来更改其颜色。

这是一个工作 fiddle http://jsfiddle.net/JohnnyEstilles/m1960yyL/ .