html+css+js实现导航栏中选中的页面对应的按钮变色的代码

HTML代码：

<nav>
  <ul>
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
}

nav a.active,
nav a:hover {
  color: #f00;
}

JS代码：

// 获取所有的导航链接
const navLinks = document.querySelectorAll('nav a');

// 遍历所有的导航链接
navLinks.forEach(link => {
  // 监听链接的点击事件
  link.addEventListener('click', function() {
    // 先移除所有链接的 active 类名
    navLinks.forEach(link => link.classList.remove('active'));
    // 给当前链接添加 active 类名
    this.classList.add('active');
  });
});

注：这里的代码是基于纯前端的实现方式，实际开发中还需要结合后端动态生成对应的导航栏和页面，并且前端需要获取当前页面的 URL，以确定哪个链接应该被标记为选中状态。