JS面向对象编程实现的Tab选项卡案例详解

介绍

Tab选项卡是网页中常见的一种交互方式，通过点击不同的选项卡，切换展示不同的内容。本文将介绍如何使用JavaScript面向对象编程实现一个Tab选项卡的效果。

准备工作

HTML结构

首先，需要在HTML中创建Tab选项卡的结构。以下是一个简单的示例：

<div class="tab">
  <ul class="tab-nav">
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      第一个选项卡的内容
    </div>
    <div class="tab-pane">
      第二个选项卡的内容
    </div>
    <div class="tab-pane">
      第三个选项卡的内容
    </div>
  </div>
</div>

其中，.tab-nav是选项卡的导航栏，.active表示当前激活的选项卡，.tab-content是选项卡的内容区域，.tab-pane是每个选项卡对应的内容。

CSS样式

接下来，需要添加一些CSS样式来美化选项卡。以下是一个简单的示例：

.tab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}

.tab-nav li {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.tab-nav li.active {
  background-color: #fff;
  border-bottom: none;
}

.tab-content .tab-pane {
  display: none;
  padding: 20px;
}

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

以上样式为Tab选项卡提供了基本的样式，可以根据需求进行修改。

JavaScript文件

最后，需要创建一个JavaScript文件，用于实现Tab选项卡的功能。以下是一个简单的示例：

class Tab {
  constructor(tab) {
    this.tab = tab;
    this.nav = tab.querySelector('.tab-nav');
    this.panels = tab.querySelectorAll('.tab-pane');
    this.activeIndex = 0;
    this.init();
  }

  init() {
    this.bindEvents();
    this.panels[this.activeIndex].classList.add('active');
  }

  bindEvents() {
    this.nav.addEventListener('click', (e) => {
      if (e.target.tagName === 'LI') {
        const index = Array.from(this.nav.children).indexOf(e.target);
        this.switchTab(index);
      }
    });
  }

  switchTab(index) {
    if (index === this.activeIndex) return;
    this.panels[this.activeIndex].classList.remove('active');
    this.panels[index].classList.add('active');
    this.nav.children[this.activeIndex].classList.remove('active');
    this.nav.children[index].classList.add('active');
    this.activeIndex = index;
  }
}

const tab = new Tab(document.querySelector('.tab'));

实现过程

在上面的代码中，我们定义了一个 Tab 类，该类接受一个包含选项卡结构的 DOM 元素作为构造函数的参数。在构造函数中，我们获取了选项卡导航栏、选项卡内容区域和当前激活的选项卡索引（默认为0），并调用了 init 方法。

在 init 方法中，我们通过调用 bindEvents 方法绑定了选项卡导航栏的点击事件，并调用了 switchTab 方法切换到当前激活的选项卡。

bindEvents 方法中，我们使用了事件委托的方式，监听了选项卡导航栏的点击事件，并根据点击的元素计算出对应的选项卡索引，然后调用了 switchTab 方法进行切换。

switchTab 方法中，我们首先判断如果点击的选项卡和当前激活的选项卡相同，则不做任何处理。然后，我们将当前激活的选项卡的 active 类名移除，将点击的选项卡的 active 类名添加，同时也对应地切换了它们对应的内容区域，最后将当前激活的选项卡索引设置为点击的选项卡的索引。

示例说明

示例一

<div class="tab">
  <ul class="tab-nav">
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      第一个选项卡的内容
    </div>
    <div class="tab-pane">
      第二个选项卡的内容
    </div>
  </div>
</div>

在这个示例中，我们创建了一个包含两个选项卡的Tab，第一个选项卡为当前激活状态。我们使用上面提到的JavaScript文件对这个Tab进行了初始化，这样点击不同的选项卡时，对应的内容区域就会展示出来。

示例二

<div class="tab">
  <ul class="tab-nav">
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
    <li>选项卡4</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      第一个选项卡的内容
    </div>
    <div class="tab-pane">
      第二个选项卡的内容
    </div>
    <div class="tab-pane">
      第三个选项卡的内容
    </div>
    <div class="tab-pane">
      第四个选项卡的内容
    </div>
  </div>
</div>

在这个示例中，我们创建了一个包含四个选项卡的Tab，第一个选项卡为当前激活状态。同样地，我们使用上面提到的JavaScript文件对这个Tab进行了初始化，这样点击不同的选项卡时，对应的内容区域就会展示出来。