当前位置：首页 > article >正文

JavaScript实现tab栏切换

article 2024/12/4 23:45:25

JavaScript实现tab栏切换

请添加图片描述

代码功能概述

这段代码实现了一个简单的选项卡（Tab）切换功能。它通过操作 HTML 元素的类名（class）来控制哪些选项卡（Tab）和对应的内容板块显示，哪些隐藏。基本思路是先移除所有选项卡和内容板块已有的“激活”类名，然后给指定的选项卡及其对应的内容板块添加“激活”类名，从而实现切换显示效果，并且初始默认显示第一个选项卡及其对应的内容。

代码详细解读

获取页面元素：

var tabs = document.querySelectorAll('.tab');
var contents = document.querySelectorAll('.tab-content');

这里使用 document.querySelectorAll 方法分别获取了页面中所有类名为 tab 的元素（通常代表选项卡按钮等）和所有类名为 tab-content 的元素（通常代表每个选项卡对应的内容展示区域），并将它们分别存储在 tabs 和 contents 变量中。

定义 showTab 函数：

function showTab(tabNumber) {
    tabs.forEach((tab) => {
        tab.classList.remove('active-tab');
    });
    contents.forEach((content) => {
        content.classList.remove('active-content');
    });
    document.getElementById('tab-' + tabNumber).classList.add('active-tab');
    document.getElementById('content-' + tabNumber).classList.add('active-content');
}

- 首先，函数接受一个参数 `tabNumber`，这个参数用于指定要显示的选项卡的序号（从代码逻辑推测，应该对应着 HTML 中选项卡和内容板块相关元素的编号部分）。
- 然后，通过 `forEach` 方法遍历之前获取到的所有 `tabs` 元素，对于每一个 `tab` 元素，使用 `classList.remove` 方法移除名为 `active-tab` 的类名，这样做的目的是将所有选项卡都设置为非激活状态，清除之前可能存在的激活样式等。
- 接着，同样使用 `forEach` 方法遍历 `contents` 元素，对每个 `content` 元素移除 `active-content` 类名，即将所有内容板块都设置为隐藏或非激活状态。
- 最后，通过 `document.getElementById` 方法，根据传入的 `tabNumber` 拼接出对应的选项卡和内容板块的 `id`（例如 `tab-1` 和 `content-1` 这样的形式），然后分别给对应的选项卡元素添加 `active-tab` 类名，给对应的内容板块元素添加 `active-content` 类名，从而实现将指定的选项卡和其对应的内容板块设置为激活状态并显示出来的效果。

初始显示设置：

showTab(1);

在脚本的最后调用了 showTab 函数并传入参数 1，这意味着页面加载时，默认会显示第一个选项卡（编号为 1 的选项卡及其对应的内容板块）处于激活状态。

可能的改进和注意事项

错误处理：代码没有对 document.getElementById 查找元素失败的情况进行处理，如果页面中不存在对应的 id 元素，代码会出现错误。可以添加适当的条件判断来避免这种情况，比如判断获取到的元素是否为 null，然后做相应的提示或处理。
动态添加元素情况：如果页面运行过程中会动态添加或删除选项卡及内容板块元素，那么 document.querySelectorAll 获取到的元素集合不会自动更新，可能导致后续切换功能出现异常。这时可能需要采用事件委托等方式来更好地处理元素变化情况。
可扩展性和灵活性：目前代码是基于固定的类名和 id 命名规则来实现功能的，如果想要更灵活地配置选项卡结构或者复用代码，可能需要将类名、id 相关的规则以及功能逻辑进一步封装成更可配置的形式，例如通过配置对象传入相关参数等。

总的来说，这段代码简洁地实现了选项卡切换的基本功能，但在实际应用中，根据具体的项目需求和页面交互情况，可能需要进一步优化和完善相关逻辑及错误处理机制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tabChange{
      width: 800px;
      height: auto;
    }
    .tabs{
      display: flex;
    }
    .tab{
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      padding: 10px 20px;
      margin-right: 5px;
      cursor: pointer;
    }
    .tab-content{
      display: none !important;
    }
    .active-tab{
      background-color: #fff;
      border-bottom: none;
    }
    .active-content{
      display: flex !important;
      padding: 20px;
    }
    .col-img{
      margin-right: 30px;
    }
    .col-img > img{
      width: 200px;
      height: 200px;
    }
    .text >p{
      text-indent: 2em;
    }
  </style>
</head>
<body>
    <div class="tabchange">
      <div class="tabs">
        <div class="tab active-tab"id="tab-1"onclick="showTab(1)">派大星</div>
        <div class="tab" id="tab-2" onclick="showTab(2)">海绵宝宝</div>
        <div class="tab" id="tab-3" onclick="showTab(3)">章鱼哥</div>
        <div class="tab" id="tab-4" onclick="showTab(4)">蟹老板</div>
      </div>
      <div class="tab-content" id="content-1">
        <div class="col-img">
          <img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt="">
        </div>
        <div class="text">
          <h3>派大星</h3>
          <p>派大星（Patrick Star），美国动画片《海绵宝宝》及其衍生作品中的角色，
            也是海绵宝宝的好朋友。他是一只粉红色的海星，说话嗓音粗，头脑简单，四肢发达，常给大家制造麻烦，
            在睡觉或发呆时还会不停的流口水。他居住在自己精心打磨的石头下面，在关键时刻会想出绝妙的点子，
            但下一秒就已经遗忘，可是在动画片中他却是说出最多饱含深意的话的角色。
          </p>
        </div>
        
        
      </div>
      <div class="tab-content" id="content-2">
        
        <div class="col-img">
          <img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt="">
        </div>
        <div class="text">
          <h3>海绵宝宝</h3>
          <p>海绵宝宝（SpongeBob SquarePants）是美国动画中的角色，原设计名为“海绵男孩”，首次登场于1999年美国同名动画《海绵宝宝》，
            人物原型为海绵，
            美国配音为汤姆·肯尼，中国大陆配音为陈浩、赵路、李璐、王沄晨，中国台湾配音为魏伯勤。
          </p>
        </div>
        
        
      
      </div>
      <div class="tab-content"id="content-3">
        
        <div class="col-img">
          <img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt="">
        </div>
        <div class="text">
          <h3>章鱼哥</h3>
          <p>蟹堡王的收银员，海绵宝宝的邻居兼同事、朋友，一只大鼻子秃脑门章鱼。
            认为海绵宝宝和派大星很幼稚。相当自恋，有一定的艺术才能但却从未得到赏识，并对艺术有执着的追求。
          </p>
        </div>
        
        
      
      </div>
      <div class="tab-content"id="content-4">
        
        <div class="col-img">
          <img src="C:\Users\Administrator\Desktop\python\.vs\image (1).jpg" alt="">
        </div>
        <div class="text">
          <h3>蟹老板</h3>
          <p>蟹老板（英文：Captain Eugene H. Armor Abs Krabs），美国动画片《海绵宝宝》系列中的主要角色之一，
            全名“尤金·H·阿尔莫·阿博斯·蟹Eugene H. Armor Abs Krabs”，为蟹堡王的老板。原型是一只螃蟹。
          </p>
        </div>
        
        
      </div>
    </div>
    <script>
      // 获取所有具有 '.tab' 类的DOM元素（标签）
      var tabs = document.querySelectorAll('.tab');
      // 获取所有具有 '.tab-content' 类的DOM元素（内容区域）
      var contents = document.querySelectorAll('.tab-content');
    
      // 定义 showTab 函数，用于切换标签页
      function showTab(tabNumber) {
        // 遍历所有标签，移除 'active-tab' 类以去除激活状态
        tabs.forEach(function(tab) {
          tab.classList.remove('active-tab');
        });
        // 遍历所有内容区域，移除 'active-content' 类以隐藏内容
        contents.forEach(function(content) {
          content.classList.remove('active-content');
        });
        // 为指定的标签添加 'active-tab' 类以显示为激活状态
        document.getElementById('tab-' + tabNumber).classList.add('active-tab');
        // 为对应的内容区域添加 'active-content' 类以显示内容
        document.getElementById('content-' + tabNumber).classList.add('active-content');
      }
    
      // 页面加载完成后，默认显示第一个标签页的内容
      showTab(1);
    </script>
</body>
</html>