如何实现像Xcode中那样的选项卡栏？

<ul class="tab-bar">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

<div class="tab-content">
  <div class="content">选项卡1的内容</div>
  <div class="content">选项卡2的内容</div>
  <div class="content">选项卡3的内容</div>
</div>

.tab-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab.active {
  background-color: #f00;
}

.tab-content {
  display: none;
}

.content.active {
  display: block;
}

// 获取选项卡元素和内容元素
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

// 给每个选项卡添加点击事件监听器
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 移除所有选项卡的active类
    tabs.forEach((tab) => {
      tab.classList.remove('active');
    });

    // 移除所有内容的active类
    contents.forEach((content) => {
      content.classList.remove('active');
    });

    // 添加当前选项卡和内容的active类
    tab.classList.add('active');
    contents[index].classList.add('active');
  });
});