javascript - 事件处理麻烦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];