页面加载时设置菜单默认激活链接的技术求助

没问题，这事儿好解决！咱们先理清楚核心需求：页面加载时默认让第一个inbox链接处于激活状态，点击其他链接时自动移除旧的激活状态并切换到当前链接——核心就是初始赋值+点击切换这两步。

首先得确保你的CSS里有一个标识激活状态的类（如果还没加的话，先补上）：

/* 激活状态的样式，根据你的需求调整 */
.mainmenu li a.active {
  background-color: #e8f4f8;
  color: #2c7a7b;
  font-weight: bold;
  /* 其他你需要的样式，比如边框、内边距等 */
}

接下来用原生JavaScript实现完整逻辑：

方法一：原生JS（通用且完整） #

直接在页面底部或者外部JS文件里加这段代码：

// 等DOM完全加载完成后再执行操作，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有菜单链接
  const allMenuLinks = document.querySelectorAll('.mainmenu li a');
  
  // 1. 页面加载时，默认激活第一个链接（也就是Inbox）
  const inboxLink = allMenuLinks[0];
  inboxLink.classList.add('active');
  
  // 2. 给每个链接绑定点击事件，切换激活状态
  allMenuLinks.forEach(link => {
    link.addEventListener('click', function() {
      // 先移除所有链接的激活类
      allMenuLinks.forEach(item => item.classList.remove('active'));
      // 给当前点击的链接加上激活类
      this.classList.add('active');
      
      // 如果你的链接是锚点跳转，不需要阻止默认行为的话可以删掉下面这行
      // e.preventDefault();
    });
  });
});

如果你的Inbox链接有专属的ID（比如<a href="#" id="inbox-link">Inbox</a>），可以更精准地定位它，把上面的const inboxLink = allMenuLinks[0];改成：

const inboxLink = document.getElementById('inbox-link');

方法二：纯CSS（仅初始激活，无法处理点击切换） #

如果只需要页面加载时的默认激活（不过你需求里提到点击要移除旧状态，所以这个方法仅作补充），可以直接用CSS伪类：

/* 给第一个菜单链接设置初始激活样式 */
.mainmenu li:first-child a {
  background-color: #e8f4f8;
  color: #2c7a7b;
  font-weight: bold;
}

⚠️ 注意：这个方法只能实现初始状态，点击其他链接后，第一个链接的激活样式不会自动消失，所以还是推荐用JS方法来完成完整的交互。

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