在活动类中使用js切换选项卡

<ul class="tab-container">
  <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-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

.tab:hover {
  background-color: #ddd;
}

.content {
  display: none;
  padding: 20px;
  background-color: #f9f9f9;
}

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

// 遍历选项卡，为每个选项卡添加点击事件
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    // 移除所有选项卡的选中状态
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
    }
    // 隐藏所有选项卡内容
    for (var k = 0; k < contents.length; k++) {
      contents[k].style.display = 'none';
    }
    // 添加当前选项卡的选中状态
    this.classList.add('active');
    // 显示对应的选项卡内容
    var index = Array.prototype.indexOf.call(tabs, this);
    contents[index].style.display = 'block';
  });
}