使用原生JS打造选项卡功能，轻松提升页面交互体验

24 min read

首先，我们可以通过HTML代码构建选项卡的结构，通常使用ul和li标签来实现，其中li标签表示每个选项卡，ul标签表示选项卡的容器。例如：

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

其中，active类表示当前选中的选项卡。

然后，在JS代码中，我们可以通过以下几个步骤来实现选项卡的功能：

  1. 获取选项卡容器和选项卡元素的DOM对象；
  2. 给每个选项卡元素添加点击事件，同时移除其他选项卡元素的active类；
  3. 将当前选项卡元素添加active类。

完整的代码示例如下：

<ul class="tab-container">
  <li class="tab active">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>
<script>
  // 获取选项卡容器和选项卡元素
  const tabContainer = document.querySelector('.tab-container');
  const tabs = tabContainer.querySelectorAll('.tab');

  for (let i = 0; i < tabs.length; i++) {
    // 为每个选项卡元素添加点击事件
    tabs[i].addEventListener('click', function() {
      // 移除其他选项卡元素的active类
      for (let j = 0; j < tabs.length; j++) {
        tabs[j].classList.remove('active');
      }
      // 将当前选项卡元素添加active类
      this.classList.add('active');
    });
  }
</script>

以上代码就实现了一个简单的选项卡功能。当用户点击不同的选项卡时，对应的内容就会显示在页面上。