事件处理的麻烦JS

Question

我有一个导航栏HTML CSS &编码，我想选择和取消选择状态添加到每个按钮的功能。我设置的第一个按钮的状态可以在window.onload功能选择这样的：

<script type="text/javascript"> 

    window.onload = function() { 
     var nav = document.getElementById('textContainer'); 
     var navItems = nav.getElementsByTagName('a'); 
     var item = navItems[0]; 
     item.style.color = "#696969";      
}; 


</script> 

我然后在另一个函数中添加事件处理程序，使按钮可以选择和取消：

<script type="text/javascript"> 
    var nav = document.getElementById('textContainer'); 
    var activeItem = null; 
    var navItems = nav.getElementsByTagName('a'); 

    for (var i = 0; i < navItems.length; i++) { 
     navItems[i].addEventListener('click', 
     function() { 

      if (activeItem) { 
       activeItem.style.color = "#b3b3b3"; 
      } 

      this.style.color = "#696969"; 
      activeItem = this; 

      //alert(activeItem.innerText); 

     }, false); 
    } 
</script> 

但是，正如我添加了这个，在window.onload函数中设置的第一个按钮不会像其他按钮一样取消选择，您必须单击第一个按钮，然后完成该操作，可以选择它并取消选择它在任何时候。

请你能告诉我我哪里出错了吗？

感谢先进！

XcodeDev。

Answer 1

尝试初始化activeItem与第一个按钮，你指定事件处理程序之前：

var navItems = nav.getElementsByTagName('a'); 
var activeItem = navItems[0]; 

Answer 2

让你的第一个脚本：

<script type="text/javascript"> 
    var activeItem = null; 

    window.onload = function() { 
      var nav = document.getElementById('textContainer'); 

      var navItems = nav.getElementsByTagName('a'); 

      var item = navItems[0]; 
      activeItem = item; 

      item.style.color = "#696969"; 

    }; 


</script> 

再不用在第二个重新申报activeItem脚本。