JS自定义选项卡函数及用法实例分析

JS自定义选项卡函数及用法实例分析

选项卡是网页中常用的一种导航方式，通过切换不同的选项卡来展示不同的内容。使用JS可以轻松实现自定义的选项卡，并添加各种效果。

函数实现

以下是一个自定义选项卡的JS函数实现：

function tabSwitch(tabNav, tabContent, activeClass, index) {
  // 获取选项卡菜单和内容的元素
  var nav = document.querySelectorAll(tabNav);
  var content = document.querySelectorAll(tabContent);

  // 隐藏所有的选项卡
  content.forEach(function(item) {
    item.style.display = 'none';
  });

  // 移除所有菜单项的激活状态
  nav.forEach(function(item) {
    item.classList.remove(activeClass);
  });

  // 显示指定位置的选项卡
  content[index].style.display = 'block';

  // 给指定的菜单项添加激活状态
  nav[index].classList.add(activeClass);

  // 点击菜单切换选项卡
  nav.forEach(function(item, idx) {
    item.addEventListener('click', function(evt) {
      evt.preventDefault();
      content.forEach(function(tab) {
        tab.style.display = 'none';
      });
      nav.forEach(function(nav) {
        nav.classList.remove(activeClass);
      });
      evt.target.classList.add(activeClass);
      content[idx].style.display = 'block';
    });
  });
}

该函数接受四个参数：

• tabNav：选项卡菜单的选择器
• tabContent：选项卡内容的选择器
• activeClass：激活状态的类名
• index：默认展示的选项卡位置

用法示例

以下是两个用法示例：

示例1：默认选中第一个选项卡

HTML结构：

<div class="tab-wrap">
  <ul class="tab-nav">
    <li class="active"><a href="#">选项卡1</a></li>
    <li><a href="#">选项卡2</a></li>
    <li><a href="#">选项卡3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel active">选项卡1的内容</div>
    <div class="tab-panel">选项卡2的内容</div>
    <div class="tab-panel">选项卡3的内容</div>
  </div>
</div>

使用方法：

tabSwitch('.tab-nav li', '.tab-content .tab-panel', 'active', 0);

其中，.tab-nav li选择器对应选项卡菜单的元素，.tab-content .tab-panel选择器对应选项卡内容的元素，active是激活状态的类名，0表示默认选中第一个选项卡。

示例2：自定义样式和效果

HTML结构：

<div class="tab-wrap2">
  <div class="tab-nav">
    <a href="#" data-index="0" class="active">选项卡1</a>
    <a href="#" data-index="1">选项卡2</a>
    <a href="#" data-index="2">选项卡3</a>
  </div>
  <div class="tab-content">
    <div class="tab-panel active">选项卡1的内容</div>
    <div class="tab-panel">选项卡2的内容</div>
    <div class="tab-panel">选项卡3的内容</div>
  </div>
</div>

使用方法：

tabSwitch('.tab-nav a', '.tab-content .tab-panel', 'active', 0);

// 自定义样式和效果
var tabNav = document.querySelector('.tab-nav');
tabNav.addEventListener('click', function(evt) {
  if (evt.target.tagName.toLowerCase() === 'a') {
    evt.preventDefault();

    // 移除所有菜单项的激活状态
    tabNav.querySelectorAll('a').forEach(function(a) {
      a.classList.remove('active');
    });

    // 添加当前菜单项的激活状态
    evt.target.classList.add('active');
  }
});

其中，.tab-nav a选择器对应选项卡菜单的元素，.tab-content .tab-panel选择器对应选项卡内容的元素，active是激活状态的类名，0表示默认选中第一个选项卡。在之后的代码中，我们添加了一个事件监听器，实现了自定义的菜单项样式和效果。