onmouseover用于使用foor循环创建的菜单

onmouseover for menu created with foor loop

本文关键字：创建 菜单 循环 foor 用于 onmouseover      更新时间：2023-09-26

我在javascript中使用for循环创建了一个简单的菜单，因为每个"tab"的大多数元素都是相同的，所以我使用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语句来确定哪个选项卡是它，并更改它的颜色，但我没能做到。

感谢大家

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

 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));
    }
相关文章：