说说用原生js实现封装一个选项卡的功能

在前端开发中，使用原生JavaScript封装一个选项卡功能是一个常见的任务。以下是一个简单的步骤指南，以及一个示例代码，帮助你实现这个功能：

步骤指南

1. HTML结构：首先，你需要创建HTML结构，包括选项卡标题（通常是按钮或链接）和对应的内容区域。

2. CSS样式：添加必要的CSS样式来美化选项卡，并确保默认状态下只有一个选项卡内容是可见的。

3. JavaScript逻辑：

   • 为每个选项卡标题添加点击事件监听器。
   • 当点击某个标题时，隐藏所有选项卡内容。
   • 显示与被点击标题相关联的内容区域。

示例代码

HTML

<div id="tabs">
  <div class="tab-header">
    <button class="tab-link" data-tab="tab1">选项卡1</button>
    <button class="tab-link" data-tab="tab2">选项卡2</button>
    <button class="tab-link" data-tab="tab3">选项卡3</button>
  </div>
  <div id="tab1" class="tab-content">
    <p>这是选项卡1的内容。</p>
  </div>
  <div id="tab2" class="tab-content">
    <p>这是选项卡2的内容。</p>
  </div>
  <div id="tab3" class="tab-content">
    <p>这是选项卡3的内容。</p>
  </div>
</div>

CSS

.tab-content {
  display: none; /* 默认隐藏所有选项卡内容 */
}

.tab-content.active {
  display: block; /* 显示被激活的选项卡内容 */
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var tabLinks = document.querySelectorAll('.tab-link'); // 获取所有选项卡标题
  var tabContents = document.querySelectorAll('.tab-content'); // 获取所有选项卡内容

  // 为每个选项卡标题添加点击事件监听器
  tabLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      var tabId = this.getAttribute('data-tab'); // 获取被点击标题的data-tab属性值
      var targetTab = document.getElementById(tabId); // 根据ID找到对应的内容区域

      // 隐藏所有选项卡内容，并移除active类名
      tabContents.forEach(function(content) {
        content.classList.remove('active');
      });

      // 显示与被点击标题相关联的内容区域，并添加active类名
      targetTab.classList.add('active');
    });
  });

  // 默认显示第一个选项卡内容（可选）
  if (tabContents.length > 0) {
    tabContents[0].classList.add('active');
  }
});

这段代码实现了一个简单的选项卡功能。你可以根据需要调整HTML结构、CSS样式和JavaScript逻辑来满足你的具体需求。