JS基于面向对象实现的选项卡效果示例

首先让我们来讲解一下“JS基于面向对象实现的选项卡效果”的概念。

选项卡效果是前端开发中常用的用来实现一些简单页面交互的方法，通常由若干个选项标签和对应的内容区块组成。用户点击某个选项标签时，对应的内容区块就会被展示出来，其他内容区块则隐藏起来。

在实现选项卡效果时，我们可以使用面向对象编程的思想来设计和编写代码，使得实现过程更加规范和易于维护。具体地，我们可以把每一个选项卡看作一个对象，它包括选项标签和对应的内容区块，可以定义一些方法和属性来控制它们之间的交互。

以下是一个简单的示例，来介绍如何使用面向对象实现选项卡效果。

HTML代码：

<div id="tabBox">
  <ul class="tabs">
    <li class="active"><a href="#tab1">选项1</a></li>
    <li><a href="#tab2">选项2</a></li>
    <li><a href="#tab3">选项3</a></li>
  </ul>
  <div class="tabContents">
    <div id="tab1">选项1的内容区域</div>
    <div id="tab2">选项2的内容区域</div>
    <div id="tab3">选项3的内容区域</div>
  </div>
</div>

CSS代码：

.tabs li {
  display: inline-block;
  margin-right: 10px;
}

.tabs li.active a {
  font-weight: bold;
}

.tabContents div {
  display: none;
}

.tabContents div.active {
  display: block;
}

JS代码：

// 定义选项卡对象
function Tab(options) {
  this.tabs = options.tabs;
  this.tabContents = options.tabContents;
  this.activeIndex = options.activeIndex || 0;
  this.init();
}

Tab.prototype.init = function() {
  var self = this;
  // 给选项标签绑定点击事件
  this.tabs.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'A') {
      e.preventDefault();
      var index = Array.prototype.indexOf.call(self.tabs.children, target.parentNode);
      self.activate(index);
    }
  });
  // 初始化选项卡状态
  this.activate(this.activeIndex);
};

Tab.prototype.activate = function(index) {
  // 更新选项卡状态
  Array.prototype.forEach.call(this.tabs.children, function(tab, i) {
    if (i === index) {
      tab.classList.add('active');
    } else {
      tab.classList.remove('active');
    }
  });
  Array.prototype.forEach.call(this.tabContents.children, function(content, i) {
    if (i === index) {
      content.classList.add('active');
    } else {
      content.classList.remove('active');
    }
  });
};

// 初始化选项卡对象
var tab = new Tab({
  tabs: document.querySelector('.tabs'),
  tabContents: document.querySelector('.tabContents'),
  activeIndex: 1
});

我们定义了一个Tab对象，它接受一个包含选项标签和对应内容区块的父元素，以及一个默认激活的选项卡索引。在初始化时，我们给选项标签绑定了点击事件，当用户点击某个选项标签时，会调用activate方法来更新选项卡状态。

在每次更新选项卡状态时，我们都会遍历选项标签和内容区块，根据索引来判断哪个应该激活，哪个应该隐藏。同时，我们给选项标签和内容区块分别添加了active类，可以用CSS来控制激活和隐藏的样式。

另外，还可以在Tab对象中扩展一些其他的方法和属性，来实现更为灵活的选项卡效果，比如动画效果、延迟加载等功能。

下面再给出一个具体的示例，来说明如何使用Tab对象来实现无限级联选项卡效果。

HTML代码：

<div id="tabBox">
  <ul class="tabs">
    <li class="active"><a href="#tab1">选项1</a></li>
    <li><a href="#tab2">选项2</a></li>
    <li><a href="#tab3">选项3</a></li>
  </ul>
  <div class="tabContents">
    <div id="tab1">
      <ul class="tabs">
        <li class="active"><a href="#tab1-1">子选项1</a></li>
        <li><a href="#tab1-2">子选项2</a></li>
        <li><a href="#tab1-3">子选项3</a></li>
      </ul>
      <div class="tabContents">
        <div id="tab1-1">子选项1的内容区域</div>
        <div id="tab1-2">子选项2的内容区域</div>
        <div id="tab1-3">子选项3的内容区域</div>
      </div>
    </div>
    <div id="tab2">
      <ul class="tabs">
        <li class="active"><a href="#tab2-1">子选项1</a></li>
        <li><a href="#tab2-2">子选项2</a></li>
        <li><a href="#tab2-3">子选项3</a></li>
      </ul>
      <div class="tabContents">
        <div id="tab2-1">子选项1的内容区域</div>
        <div id="tab2-2">子选项2的内容区域</div>
        <div id="tab2-3">子选项3的内容区域</div>
      </div>
    </div>
    <div id="tab3">
      <ul class="tabs">
        <li class="active"><a href="#tab3-1">子选项1</a></li>
        <li><a href="#tab3-2">子选项2</a></li>
        <li><a href="#tab3-3">子选项3</a></li>
      </ul>
      <div class="tabContents">
        <div id="tab3-1">子选项1的内容区域</div>
        <div id="tab3-2">子选项2的内容区域</div>
        <div id="tab3-3">子选项3的内容区域</div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.tabs li {
  display: inline-block;
  margin-right: 10px;
}

.tabs li.active a {
  font-weight: bold;
}

.tabContents div {
  display: none;
}

.tabContents div.active {
  display: block;
}

JS代码：

// 定义选项卡对象
function Tab(options) {
  this.tabs = options.tabs;
  this.tabContents = options.tabContents;
  this.activeIndex = options.activeIndex || 0;
  this.init();
}

Tab.prototype.init = function() {
  var self = this;
  // 给选项标签绑定点击事件
  this.tabs.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'A') {
      e.preventDefault();
      var path = [];
      var parentTab = target.parentNode;
      while (parentTab !== self.tabs) {
        var index = Array.prototype.indexOf.call(parentTab.parentNode.children, parentTab);
        path.unshift(index);
        parentTab = parentTab.parentNode.parentNode.previousElementSibling;
      }
      self.activate(path);
    }
  });
  // 初始化选项卡状态
  this.activate(this.activeIndex);
};

Tab.prototype.activate = function(path) {
  var tabs = this.tabs;
  var tabContents = this.tabContents;
  // 遍历路径，逐级更新选项卡状态
  path.forEach(function(index, i) {
    tabs = tabs.children[index].lastElementChild;
    tabContents = tabContents.children[index].lastElementChild;
    Array.prototype.forEach.call(tabs.children, function(tab, j) {
      if (j === (i === path.length - 1 ? index : 0)) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    });
    Array.prototype.forEach.call(tabContents.children, function(content, j) {
      if (j === (i === path.length - 1 ? index : 0)) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });
  });
};

// 初始化选项卡对象
var tab = new Tab({
  tabs: document.querySelector('.tabs'),
  tabContents: document.querySelector('.tabContents'),
  activeIndex: [0, 0]
});

在这个示例中，我们给每个选项卡添加了子选项卡，当用户点击子选项卡时，会通过路径来更新选项卡状态。

在init方法中，我们使用了一个while循环来获取当前点击的选项卡在路径中的位置。具体来说，我们从当前选项卡的父元素parentTab开始，向上遍历它的父元素，直到遍历到最顶层的选项卡为止。在遍历的同时，我们记录每个父元素的位置，即它在其父元素中的索引，并把它们存储在path数组中。

在activate方法中，我们遍历path数组，逐个更新当前选项卡的子选项卡状态。这里需要注意的是，因为每个选项卡有可能包含多个子选项卡，所以在更新状态时需要根据路径中的索引来判断哪个子选项卡应该激活，哪个应该隐藏。

总的来说，使用面向对象编程的思想来实现选项卡效果，能够让代码更加模块化和可维护，便于扩展和修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS基于面向对象实现的选项卡效果示例 - Python技术站

JS基于面向对象实现的选项卡效果示例

HTML代码：

CSS代码：

JS代码：

HTML代码：

CSS代码：

JS代码：

相关文章