访问Tab组件内的组件

// 假设Tab组件的结构如下：
<div class="tab-container">
  <div class="tab-menu">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-item active">
      Content of Tab 1
    </div>
    <div id="tab2" class="tab-item">
      Content of Tab 2
    </div>
    <div id="tab3" class="tab-item">
      Content of Tab 3
    </div>
  </div>
</div>

// JavaScript代码示例：
// 获取Tab菜单按钮
const tabButtons = document.querySelectorAll('.tab-button');
// 获取Tab内容区域
const tabItems = document.querySelectorAll('.tab-item');

// 遍历Tab菜单按钮，为每个按钮添加点击事件处理函数
tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 切换菜单按钮的active状态
    tabButtons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');
    
    // 切换内容区域的active状态
    const tabId = button.getAttribute('data-tab');
    tabItems.forEach(item => {
      item.classList.remove('active');
      if (item.getAttribute('id') === tabId) {
        item.classList.add('active');
      }
    });
  });
});