为何重复使用ID无效？子菜单hover背景色按时间切换失败排查

咱们先拆解你代码里的核心问题：

1. 重复ID导致仅第一个子菜单生效 #

HTML里你给三个子菜单<li>都用了id="navbar-menu"，但ID在整个DOM中必须是唯一的！document.getElementById()只会返回第一个匹配到的元素，所以你的JS代码只会修改第一个子菜单的背景色，另外两个完全没被选中到，这是最关键的问题。

2. 函数逻辑的局限性 #

你的init1函数里，内部的setBackgroundForTimeOfDay只处理了单个元素，就算ID唯一，也没法覆盖所有子菜单。

修复步骤 #

第一步：修正HTML的重复ID #

把所有子菜单的id="navbar-menu"改成class="navbar-menu"，class是用来标记一组相同元素的，完全适合这个场景：

<li class="navbar-menu"><a href="#">Sub-menu Item 1</a></li>
<li class="navbar-menu"><a href="#">Sub-menu Item 2</a></li>
<li class="navbar-menu"><a href="#">Sub-menu Item 3</a></li>

第二步：修改JS代码选中所有子菜单 #

用document.querySelectorAll('.navbar-menu')获取所有子菜单元素，然后遍历每个元素设置样式：

function init1() {
  function setBackgroundForTimeOfDay() {
    // 获取所有子菜单元素
    const menuItems = document.querySelectorAll('.navbar-menu');
    const hours = new Date().getHours();
    // 遍历每个元素设置背景色
    menuItems.forEach(item => {
      if (hours < 6 || hours >= 18) {
        item.style.background = 'rgb(245, 96, 96)';
      } else {
        item.style.background = 'rgb(96, 235, 245)';
      }
    });
  }
  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}
init1();

第三步：优化hover样式（可选） #

如果你想让hover颜色也随时间切换，不要直接删CSS，用动态添加类的方式更灵活，还能避免内联样式和CSS的冲突：

1. 先在CSS里定义两种hover样式：

/* 夜间hover样式 */
.navbar-menu.night a:hover {
  background: rgb(245, 96, 96);
  color: white;
}
/* 日间hover样式 */
.navbar-menu.day a:hover {
  background: rgb(96, 235, 245);
  color: white;
}

2. 修改JS代码，给元素添加对应类（同时移除另一个类）：

function init1() {
  function setBackgroundForTimeOfDay() {
    const menuItems = document.querySelectorAll('.navbar-menu');
    const hours = new Date().getHours();
    const isNight = hours < 6 || hours >= 18;
    
    menuItems.forEach(item => {
      if (isNight) {
        item.classList.add('night');
        item.classList.remove('day');
      } else {
        item.classList.add('day');
        item.classList.remove('night');
      }
    });
  }
  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}
init1();

这样既解决了多元素的样式问题，又能让hover效果随时间动态切换，逻辑更清晰也更易维护~

内容的提问来源于stack exchange，提问作者Jeeva Bharathi