JavaScript：选中其他元素时切换类隐藏及左右区块联动显示问题

嘿，这个需求太常见啦，我帮你梳理下实现步骤，保证切换时能自动清理之前的激活状态：

第一步：统一HTML结构标识 #

先确保左侧列表项和右侧内容块有清晰的对应标识，方便精准操作：

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" onclick="toggleVisibility('item1');" href="#">选项1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" onclick="toggleVisibility('item2');" href="#">选项2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" onclick="toggleVisibility('item3');" href="#">选项3</a>
  </li>
</ul>

<!-- 右侧内容块 -->
<div id="item1" style="display: none;">内容1</div>
<div id="item2" style="display: none;">内容2</div>
<div id="item3" style="display: none;">内容3</div>

（注：我把函数名改成了驼峰式toggleVisibility，你也可以保留原来的toggle_visibility，不影响功能）

第二步：改进JavaScript函数，添加激活类切换逻辑 #

修改你的切换函数，让它在显示目标内容的同时，自动处理激活类的移除和添加：

function toggleVisibility(targetId) {
  // 1. 隐藏所有右侧内容块
  const allContentDivs = document.querySelectorAll('[id^="item"]'); // 假设内容块id以item开头
  allContentDivs.forEach(div => {
    div.style.display = 'none';
  });

  // 2. 移除所有导航项的激活类
  const allNavLinks = document.querySelectorAll('.nav-link');
  allNavLinks.forEach(link => {
    link.classList.remove('active'); // 这里用bootstrap的active类，你可以换成自己定义的类名
  });

  // 3. 给当前点击的导航项添加激活类
  const currentLink = event.target;
  currentLink.classList.add('active');

  // 4. 显示目标内容块
  const targetDiv = document.getElementById(targetId);
  if (targetDiv) {
    targetDiv.style.display = 'block';
  }
}

几个实用小提示： #

• 如果你的激活类不是active，记得把代码里的active换成你自定义的类名（比如selected）
• 要是右侧内容块没有统一id前缀，可以给它们加共同类名（比如content-block），然后用document.querySelectorAll('.content-block')选中
• 如果a标签里还有子元素，把event.target换成event.currentTarget，确保选中的是a标签本身

这样修改后，每次点击新导航项，之前选中的项会自动失去激活类，当前项加上激活类，同时对应内容块切换显示，完美实现你要的效果！

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