如何基于HTML元素的title属性为导航链接添加并切换CSS的active类

没问题，我帮你搞定这个需求！下面是仅用JavaScript实现的方案，完全基于链接的title属性来管理active类的添加和移除，确保同一时间只有一个导航链接处于激活状态：

完整代码示例 #

首先保留你的原始HTML结构：

<a class="nav-link main-navigation-link" href="#" itemprop="url" title="Brand">
  <div class="main-navigation-link-text">
    <span itemprop="name">Brand</span>
  </div>
</a>
<!-- 其他导航链接示例 -->
<a class="nav-link main-navigation-link" href="#" itemprop="url" title="Product">
  <div class="main-navigation-link-text">
    <span itemprop="name">Product</span>
  </div>
</a>

然后是核心JavaScript代码：

// 获取所有目标导航链接
const navLinks = document.querySelectorAll('.nav-link.main-navigation-link');

// 封装移除所有链接active类的函数，方便复用
function clearActiveLinks() {
  navLinks.forEach(link => link.classList.remove('active'));
}

// 给每个导航链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', (event) => {
    // 第一步：先移除所有链接的active类，确保只有当前点击的链接激活
    clearActiveLinks();
    // 第二步：给当前点击的链接添加active类
    event.currentTarget.classList.add('active');
    
    // 如果你是单页应用（不刷新页面跳转），可以取消下面的注释阻止默认跳转行为
    // event.preventDefault();
  });
});

// 页面加载完成后自动设置初始激活状态（可选但推荐，适配多页网站刷新场景）
document.addEventListener('DOMContentLoaded', () => {
  // 这里的匹配逻辑可以根据你的实际需求调整
  // 示例：如果页面标题包含链接的title，就设置该链接为激活状态
  navLinks.forEach(link => {
    const linkTitle = link.getAttribute('title');
    if (document.title.includes(linkTitle)) {
      clearActiveLinks();
      link.classList.add('active');
    }
  });
});

代码分步解释 #

1. 获取目标链接：用document.querySelectorAll选中所有带有nav-link和main-navigation-link类的链接，确保我们只处理导航栏的特定链接。
2. 封装清除激活类的函数：把移除所有链接active类的逻辑单独封装，避免重复代码，后续点击事件和页面初始化都能复用。
3. 绑定点击事件：给每个链接添加点击监听，点击时先清空所有激活状态，再给当前点击的链接加上active类，保证同一时刻只有一个导航链接处于激活状态。
4. 页面初始化激活状态：对于多页网站，页面刷新后之前的激活状态会丢失，所以在页面加载完成后，通过匹配页面标题（你也可以改成匹配URL等规则）自动找到对应的导航链接并设置激活状态，提升用户体验。

额外注意事项 #

• 如果你的网站是单页应用（点击链接不刷新页面），记得取消代码里event.preventDefault()的注释，阻止链接的默认跳转行为，再配合你的路由逻辑处理页面切换。
• 如果是多页网站，需要把这段JavaScript代码放到每个页面的导航部分附近，或者引入到全局的JS文件中，确保每个页面都能执行这段逻辑。
• 匹配初始激活状态的逻辑可以灵活调整：比如你可以根据当前页面的URL路径来匹配链接的href，或者根据页面内的某个标识来对应链接的title，只要符合你的项目需求即可。

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