JS怎么做出选项卡

要使用JavaScript制作选项卡，可以按照以下步骤进行：

（图片来源网络，侵删）

1、创建HTML结构

我们需要创建一个包含选项卡标题和内容的HTML结构，可以使用<div>元素作为容器，并在其中添加<ul>元素作为选项卡标题列表，以及<div>元素作为选项卡内容容器。

<div class="tabs">
  <ul class="tabnav">
    <li class="tabnavitem" datatarget="tab1">选项卡1</li>
    <li class="tabnavitem" datatarget="tab2">选项卡2</li>
    <li class="tabnavitem" datatarget="tab3">选项卡3</li>
  </ul>
  <div class="tabcontent">
    <div class="tabpane" id="tab1">选项卡1的内容</div>
    <div class="tabpane" id="tab2">选项卡2的内容</div>
    <div class="tabpane" id="tab3">选项卡3的内容</div>
  </div>
</div>

2、编写CSS样式

接下来，我们需要为选项卡添加一些基本样式，可以使用CSS选择器为选项卡标题和内容设置样式。

.tabs {
  display: flex;
}
.tabnav {
  liststyle: none;
  display: flex;
}
.tabnavitem {
  cursor: pointer;
  padding: 10px;
}
.tabcontent {
  display: none;
}
.tabpane {
  display: block;
}

3、编写JavaScript代码

我们需要编写JavaScript代码来实现选项卡的切换功能，可以通过监听选项卡标题的点击事件，然后根据点击的标题显示对应的内容。

document.addEventListener('DOMContentLoaded', function () {
  var tabNavItems = document.querySelectorAll('.tabnavitem');
  var tabPanes = document.querySelectorAll('.tabpane');
  tabNavItems.forEach(function (tabNavItem) {
    tabNavItem.addEventListener('click', function () {
      var target = this.getAttribute('datatarget');
      tabNavItems.forEach(function (item) {
        item.classList.remove('active');
      });
      tabPanes.forEach(function (tabPane) {
        tabPane.style.display = 'none';
      });
      this.classList.add('active');
      document.getElementById(target).style.display = 'block';
    });
  });
});

这样，我们就使用JavaScript实现了一个简单的选项卡功能，当点击选项卡标题时，会切换到对应的选项卡内容。