如何用JavaScript实现点击CTA时高亮对应导航项

核心逻辑是把导航高亮切换逻辑抽为公共可复用函数，CTA点击、导航自身点击都调用该函数，即可实现联动效果，高亮状态会持续保留直到点击其他导航项。

1. 高亮样式参考（已写好.active样式可直接跳过） #

.nav__link.active {
  color: #165DFF;
  font-weight: 600;
  border-bottom: 2px solid #165DFF;
  /* 自行替换为你需要的高亮效果即可 */
}

2. JavaScript交互代码 #

把下面代码放到页面</body>标签前，或者DOM加载完成的回调中即可直接生效：

// 获取页面DOM节点
const viewWorkCta = document.querySelector('.heading__cta');
const allNavLinks = document.querySelectorAll('.nav__link');

/**
 * 公共方法：设置对应锚点的导航项为高亮状态
 * @param {string} hash 目标锚点值，例：#about
 */
function setNavActive(hash) {
  // 先清除所有导航项的高亮状态
  allNavLinks.forEach(link => link.classList.remove('active'));
  // 匹配到对应导航项后添加高亮类
  const targetNavItem = document.querySelector(`.nav__link[href="${hash}"]`);
  targetNavItem?.classList.add('active');
}

// 绑定CTA点击事件：点击时自动高亮About导航项
viewWorkCta.addEventListener('click', () => {
  const targetHash = viewWorkCta.getAttribute('href');
  setNavActive(targetHash);
  // 如果需要平滑滚动效果，放开下面这行注释即可
  // document.querySelector(targetHash).scrollIntoView({ behavior: 'smooth' });
});

// 绑定导航栏自身的点击切换逻辑
allNavLinks.forEach(link => {
  link.addEventListener('click', () => {
    const targetHash = link.getAttribute('href');
    setNavActive(targetHash);
    // 如果需要平滑滚动效果，放开下面这行注释即可
    // document.querySelector(targetHash).scrollIntoView({ behavior: 'smooth' });
  });
});

// 可选扩展：页面首次加载时自动匹配URL hash高亮，无hash默认高亮Home项
window.addEventListener('DOMContentLoaded', () => {
  const initialHash = window.location.hash || '#home';
  setNavActive(initialHash);
});

适配提示 #

• 如果你之前已经写过导航点击切换高亮的逻辑，不需要重复绑定导航事件，只需要补充CTA的点击事件，调用setNavActive('#about')就能实现联动
• 后续新增其他跳转到页内区块的按钮时，都可以直接复用setNavActive方法，不需要重复编写高亮切换逻辑

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