Question

我有一个用html＆amp;编码的导航栏。 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。

事件处理麻烦JS

2 个答案: