JavaScript 如何实现标签页切换功能？

  

    
标签页1
    
标签页2
    
标签页3
  
  

    
标签页1的内容
    
标签页2的内容
    
标签页3的内容
  

// 获取标签页菜单和内容
const tabMenu = document.querySelector('.tab-menu');
const tabContent = document.querySelector('.tab-content');

// 获取标签页菜单项和内容项
const tabItems = tabMenu.querySelectorAll('li');
const tabContentItems = tabContent.querySelectorAll('.tab-pane');

// 为标签页菜单项添加点击事件监听器
tabItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 移除所有标签页菜单项的 active 类
    tabItems.forEach((item) => {
      item.classList.remove('active');
    });

    // 移除所有标签页内容项的 active 类
    tabContentItems.forEach((item) => {
      item.classList.remove('active');
    });

    // 添加当前选中标签页菜单项的 active 类
    item.classList.add('active');

    // 添加当前选中标签页内容项的 active 类
    tabContentItems[index].classList.add('active');
  });
});