typescript使用for循环打开多个选项卡

// 定义选项卡数组
const tabs = [
  { title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }
];

// 获取导航栏和内容容器的DOM元素
const navBar = document.getElementById('nav-bar');
const contentContainer = document.getElementById('content-container');

// 创建选项卡
for (let i = 0; i < tabs.length; i++) {
  const tab = tabs[i];

  // 创建导航栏元素
  const navItem = document.createElement('div');
  navItem.textContent = tab.title;
  navItem.classList.add('nav-item');

  // 添加点击事件监听器
  navItem.addEventListener('click', () => {
    // 清除所有选项卡的选中状态
    const navItems = document.getElementsByClassName('nav-item');
    for (let j = 0; j < navItems.length; j++) {
      navItems[j].classList.remove('active');
    }

    // 设置当前选项卡的选中状态
    navItem.classList.add('active');

    // 更新选项卡内容
    contentContainer.textContent = tab.content;
  });

  // 添加导航栏元素到导航栏容器
  navBar.appendChild(navItem);
}