如何使用HTML/CSS/JS设置导航元素默认激活并点击切换状态

实现步骤如下： #

1. 修正HTML导航标签嵌套错误
   你现有的导航项标签嵌套顺序有误，所有<li>里的<a>标签要先闭合<a>再闭合<li>，修正后的导航部分代码如下：

<div class="nav-container">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#slices">Slices</a></li>
        <li><a href="#team">Team</a></li>
    </ul>
</div>

错误的嵌套会导致样式和点击事件异常，一定要先修改。

2. 新增激活态CSS规则
   在你的CSS文件的导航样式部分，添加.active类的样式，和hover效果保持一致即可：

/* 原有li a:hover样式保留，新增下面的代码 */
li a.active {
  background-color: tomato;
  border-radius: 2.5rem;
  color: white;
}

注：CSS自带的:active伪类仅能表示鼠标按下未松开的临时状态，无法持久保持，因此我们自定义.active类实现常驻的当前导航标识效果。

3. 添加JS实现状态切换逻辑
   把以下代码放到你HTML页面的</body>标签之前即可：

// 获取所有导航链接元素
const navLinks = document.querySelectorAll('.nav-container li a')

// 页面加载完成后默认给Home链接加激活状态
window.addEventListener('load', () => {
  navLinks[0].classList.add('active')
})

// 给每个导航链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', e => {
    // 先移除所有导航链接的激活状态
    navLinks.forEach(item => item.classList.remove('active'))
    // 给当前点击的链接加激活状态
    e.target.classList.add('active')
  })
})

修改完成后就可以实现你要的效果：页面初次加载时Home默认激活，点击其他导航项后Home激活状态消失，点击任意导航项都会自动切换激活状态到对应选项。

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