原生html写tab页,原生JS选项卡（Tab页切换）

好的，我来为您详细说明如何使用原生 HTML 和 JavaScript 创建选项卡（Tab页切换）。

首先，我们需要在 HTML 中创建选项卡的结构。我们可以使用 ul 和 li 标签来创建选项卡的导航栏，使用 div 标签来创建选项卡的内容：

<div class="tab">
  <ul class="tab-nav">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1" class="tab-pane active">Content for tab 1 goes here.</div>
    <div id="tab-2" class="tab-pane">Content for tab 2 goes here.</div>
    <div id="tab-3" class="tab-pane">Content for tab 3 goes here.</div>
  </div>
</div>

在上面的示例中，我们使用了一个包含三个选项卡的 div 元素。每个选项卡都有一个对应的 ID 和相应的内容。

接下来，我们需要使用 JavaScript 来实现选项卡的切换功能。我们可以使用以下代码：

const tabs = document.querySelectorAll('.tab-nav li');
const tabContent = document.querySelectorAll('.tab-content .tab-pane');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');
    tabContent.forEach(content => content.classList.remove('active'));
    tabContent[index].classList.add('active');
  });
});

在上面的示例中，我们首先使用 querySelectorAll 函数获取选项卡的导航栏和内容。然后，我们使用 forEach 函数为每个选项卡添加一个点击事件监听器。当用户点击选项卡时，我们将为当前选项卡添加一个“active”类，并将其它选项卡的“active”类移除。我们还将为当前选项卡的内容添加一个“active”类，以显示相应的内容。

最后，我们需要为选项卡添加一些 CSS 样式来美化它们：

.tab {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.tab-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab-nav li {
  flex: 1;
  text-align: center;
}

.tab-nav li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

.tab-nav li.active a {
  color: #fff;
  background-color: #007acc;
}

.tab-content {
  padding: 20px;
}

.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active {
  display: block;
}

在上面的示例中，我们使用了 flexbox 布局和一些基本样式来创建选项卡。我们还添加了一些样式来突出显示当前选项卡和内容。

通过以上步骤，我们就成功地创建了一个原生 HTML 和 JavaScript 的选项卡。