如何将menuSubItem与tabPanel关联起来

<div class="menu">
  <div class="menu-item" id="item1">菜单项1</div>
  <div class="menu-item" id="item2">菜单项2</div>
  <div class="menu-item" id="item3">菜单项3</div>
</div>

<div class="tab">
  <div class="tab-panel" id="panel1">选项卡面板1</div>
  <div class="tab-panel" id="panel2">选项卡面板2</div>
  <div class="tab-panel" id="panel3">选项卡面板3</div>
</div>

.menu {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.menu-item {
  cursor: pointer;
  padding: 10px;
  background-color: #ccc;
}

.tab-panel {
  display: none;
  padding: 20px;
  background-color: #f0f0f0;
}

// 获取菜单项和选项卡面板的DOM元素
var menuItems = document.querySelectorAll('.menu-item');
var tabPanels = document.querySelectorAll('.tab-panel');

// 监听菜单项的点击事件
menuItems.forEach(function(item) {
  item.addEventListener('click', function() {
    // 获取当前菜单项的ID
    var itemId = item.getAttribute('id');
    
    // 根据菜单项的ID找到对应的选项卡面板的ID
    var panelId = itemId.replace('item', 'panel');
    
    // 显示对应的选项卡面板，隐藏其他面板
    tabPanels.forEach(function(panel) {
      if (panel.getAttribute('id') === panelId) {
        panel.style.display = 'block';
      } else {
        panel.style.display = 'none';
      }
    });
  });
});