左侧菜单显隐交互求助：点击Home在右侧navigation-aside-wrapper打开对应项

要实现点击左侧菜单（Home/About）时，右侧容器显示对应内容的效果，我们可以通过关联元素标识+CSS控制显示+JS处理点击事件来完成，具体步骤如下：

一、调整HTML结构，给元素添加关联标识 #

首先需要给左侧菜单和右侧内容建立对应关系，通过data-target和id属性绑定：

<div class="container">
  <div class="navigation">
    <div class="navigation-wrapper">
      <!-- 左侧菜单添加data-target，指向右侧对应内容的id -->
      <div class="navigation-aside-item" data-target="home-content">
        <span>Home</span>
      </div>
      <div class="navigation-aside-item" data-target="about-content">
        <span>About</span>
      </div>
    </div>
  </div>
  <div class="navigation-aside-wrapper">
    <!-- 右侧内容添加唯一id，默认隐藏 -->
    <div class="navigation-aside-item content-item" id="home-content">
      Home Child
    </div>
    <div class="navigation-aside-item content-item" id="about-content">
      About Child
    </div>
  </div>
</div>

二、添加基础CSS样式 #

设置布局为左右排列，默认隐藏右侧所有内容，只有带.active类的内容才显示，同时给选中的左侧菜单加高亮样式：

.container {
  display: flex;
  gap: 20px;
}

/* 左侧菜单样式 */
.navigation .navigation-aside-item {
  padding: 10px 15px;
  cursor: pointer;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.navigation .navigation-aside-item.active {
  background-color: #e8f0fe;
  color: #165dff;
}

/* 右侧内容容器样式 */
.navigation-aside-wrapper {
  flex: 1;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}
/* 右侧内容默认隐藏 */
.content-item {
  display: none;
}
/* 激活状态显示内容 */
.content-item.active {
  display: block;
}

三、编写JavaScript交互逻辑 #

给左侧每个菜单项绑定点击事件，点击时切换对应右侧内容的显示状态：

// 获取所有左侧菜单项
const menuItems = document.querySelectorAll('.navigation .navigation-aside-item');
// 获取所有右侧内容项
const contentItems = document.querySelectorAll('.content-item');

// 遍历菜单项添加点击事件
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 1. 移除所有菜单的active类
    menuItems.forEach(menu => menu.classList.remove('active'));
    // 2. 给当前点击的菜单添加active类
    item.classList.add('active');
    
    // 3. 获取目标内容的id
    const targetId = item.dataset.target;
    // 4. 移除所有内容的active类
    contentItems.forEach(content => content.classList.remove('active'));
    // 5. 给目标内容添加active类，使其显示
    document.getElementById(targetId).classList.add('active');
  });
});

// 默认显示第一个内容
menuItems[0].click();

这样点击左侧的Home或About，右侧就会对应显示Home Child或About Child，同时左侧选中的菜单会高亮，未选中的内容自动隐藏。

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