如何在一个页面上使用多个选项卡栏

<ul class="tabs">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
  <li>选项卡3</li>
</ul>

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.tabs li {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

.tabs li.active {
  background-color: #ccc;
}

// 获取选项卡导航栏和内容区域的元素
var tabs = document.querySelectorAll('.tabs li');
var tabContents = document.querySelectorAll('.tab-content');

// 遍历选项卡导航栏的每个选项卡
tabs.forEach(function(tab, index) {
  // 监听点击事件
  tab.addEventListener('click', function() {
    // 移除所有选项卡的active类
    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    // 添加当前选项卡的active类
    tab.classList.add('active');

    // 隐藏所有内容区域
    tabContents.forEach(function(content) {
      content.style.display = 'none';
    });
    // 显示对应索引的内容区域
    tabContents[index].style.display = 'block';
  });
});

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