如何单击平面列表中的项目以显示另一个组件，而不在抽屉中显示该组件

<div class="list-container">
  <ul class="item-list">
    <li class="list-item" id="item1">项目1</li>
    <li class="list-item" id="item2">项目2</li>
    <li class="list-item" id="item3">项目3</li>
  </ul>
</div>

<div id="component1" class="component hidden">
  <!-- 要显示的组件内容 -->
</div>
<div id="component2" class="component hidden">
  <!-- 要显示的组件内容 -->
</div>
<div id="component3" class="component hidden">
  <!-- 要显示的组件内容 -->
</div>

.hidden {
  display: none;
}

.component {
  /* 调整组件的样式和布局 */
}

// 获取项目列表中的所有列表项
const itemList = document.querySelectorAll('.list-item');

// 为每个列表项添加点击事件处理程序
itemList.forEach(item => {
  item.addEventListener('click', () => {
    // 获取要显示的组件的ID
    const componentId = item.id.replace('item', 'component');
    
    // 获取要显示的组件的DOM元素
    const component = document.getElementById(componentId);
    
    // 隐藏所有组件
    const allComponents = document.querySelectorAll('.component');
    allComponents.forEach(c => {
      c.classList.add('hidden');
    });
    
    // 显示目标组件
    component.classList.remove('hidden');
  });
});