0

我在 javascript 中使用 for 循环创建了一个简单的菜单，因为大多数元素对于每个“选项卡”都是相同的，所以我使用 for 循环一口气完成了所有操作。

我的问题是当我使用鼠标悬停在选项卡上时，如何使用 onmouseover 事件更改选项卡的背景颜色。

例子：

TopValues = [ "130px", "163px", "196px" ];
MenuNames = [ "Home", "Articles", "Contact" ];
MenuItemLinks = [ "#", "#", "#" ];
MenuItemTitles = [ "Go To Home", "Go To Articles", "Go To Contact" ];

window.onload = function makeMenu() {
    for(var i=0; i<MenuNames.length; i++) {
        var menu = document.createElement('a');
        menu.text = MenuNames[i];
        menu.title = MenuItemTitles[i];
        menu.href = MenuItemLinks[i];
        document.body.appendChild(menu);

        menu.style.position = "fixed";
        menu.style.border = "1px solid red";
        menu.style.width = "90px";
        menu.style.top = TopValues[i];
        menu.style.left = "5px";
        menu.style.padding = "5px";
        menu.style.borderRadius = "5px";
        menu.style.textDecoration = "none";
        menu.style.background = "yellow";
        menu.style.color = "red";

    }
    menu.onmouseover = function() { menu.style.background = "orange"; };
    menu.onmouseout = function() { menu.style.background = "yellow"; };
}

在此示例中，只有最后一个选项卡会更改应有的背景颜色。你能帮我理解我应该怎么做吗？

我正在考虑创建一个空数组并将它的 ID 分配给每个选项卡，并使用另一个 for 循环和 if 语句来确定它是哪个选项卡，并更改它的颜色，但我没有管理。

谢谢大家

4

1 回答 1

0

在循环内移动事件侦听器。

 for(var i=0; i<MenuNames.length; i++) {
        var menu = document.createElement('a');
        menu.text = MenuNames[i];
        menu.title = MenuItemTitles[i];
        menu.href = MenuItemLinks[i];
        document.body.appendChild(menu);

        menu.style.position = "fixed";
        menu.style.border = "1px solid red";
        menu.style.width = "90px";
        menu.style.top = TopValues[i];
        menu.style.left = "5px";
        menu.style.padding = "5px";
        menu.style.borderRadius = "5px";
        menu.style.textDecoration = "none";
        menu.style.background = "yellow";
        menu.style.color = "red";
        (function(el) {
            el.onmouseover = function() { el.style.background = "orange"; };
            el.onmouseout = function() { el.style.background = "yellow"; }
        }(menu));
    }
于 2013-07-24T19:42:58.357 回答