html+css+js实现导航栏的内容选中状态的代码

可以使用JavaScript来实现导航栏的内容选中状态。

首先，给导航栏中的每个选项添加一个点击事件。在点击事件中，先移除所有选项的选中状态，然后给当前点击的选项添加选中状态。

HTML代码示例：

<nav>
  <ul>
    <li><a href="#" class="active">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</nav>

CSS代码示例：

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

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

nav a.active {
  background-color: #ccc;
}

JavaScript代码示例：

const navLinks = document.querySelectorAll('nav a');

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 移除所有选项的选中状态
    navLinks.forEach(link => {
      link.classList.remove('active');
    });
    // 给当前点击的选项添加选中状态
    this.classList.add('active');
  });
});