JavaScript实现Tab标签页切换的4种方式：从基础到最优解

作者：窗边听雨时间：2026-10-23 19:32:58浏览：615

本文详细解析JavaScript实现Tab标签页切换的四种方法。从最基础的独立ID控制，到利用索引参数优化，再到传递this指针，最后介绍完全分离HTML、CSS与JS的最简便方案。通过对比各方案的代码冗余度与扩展性，帮助开发者选择最适合项目的实现方式，提升前端交互体验。

基础实现：独立ID控制法

首先介绍一种最基础、直观的实现思路。

HTML结构部分。


<div class="tab-head">
      <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2>
      <h2 id="tab2" onmouseover="changeTab2()">2</h2>
      <h2 id="tab3" onmouseover="changeTab3()">3</h2>
    </div>
    <div class="tab-content">
      <div id="c1" class="show">content1</div>
      <div id="c2">content2</div>
      <div id="c3">content3</div>
    </div>

CSS样式定义部分。


h2 {
        border-top: solid cornflowerblue 1px;
        border-left: solid cornflowerblue 1px;
        width: 50px;
        height: 25px;
        margin: 0;
        float: left;
        text-align: center;
      }
      
      .tab-content {
        border: solid cornflowerblue 1px;
        width: 152px;
        height: 100px;
      }
      
      .tab-content div{
        display: none;
      }
      
      .selected {
        background-color: cornflowerblue;
      }
      
      .tab-content .show{
        display: block;
      }

JavaScript逻辑代码部分。


var tab1 = document.getElementById('tab1'),
        tab2 = document.getElementById('tab2'),
        tab3 = document.getElementById('tab3'),
        c1 = document.getElementById('c1'),
        c2 = document.getElementById('c2'),
        c3 = document.getElementById('c3');

      function changeTab1() {
        tab1.className = 'selected';
        tab2.className = '';
        tab3.className = '';
        c1.className = 'show'
        c2.className = '';
        c3.className = '';
      }

      function changeTab2() {
        tab1.className = '';
        tab2.className = 'selected';
        tab3.className = '';
        c1.className = '';
        c2.className = 'show';
        c3.className = '';
      }

      function changeTab3() {
        tab1.className = '';
        tab2.className = '';
        tab3.className = 'selected';
        c1.className = ''
        c2.className = '';
        c3.className = 'show';
      }

最终呈现效果。

基础实现：独立ID控制法

实现Tab切换，一种直观的思路是为每个需要控制的标签分配唯一的id，并分别编写鼠标事件。通过id获取对应元素，精确控制其样式变化。

这种方式的缺点非常明显：有多少个标签就需要定义多少个id，每个tab都要单独编写一个function，且内部逻辑高度相似。若需增加tab，必须同步增加id和对应的function，导致代码冗余严重，难以扩展。

优化方案一：索引参数法

第二种方法相对更优，其核心是封装一个通用的function，并将每个元素的序号作为参数传入。

HTML结构示例。


<div class="tab-head">
      <h2 onmouseover="changeTab(0)" class="selected">1</h2>
      <h2 onmouseover="changeTab(1)">2</h2>
      <h2 onmouseover="changeTab(2)">3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JavaScript代码实现。


var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      function changeTab(index) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(i === index) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          }else{            tabs[i].className = '';
            contents[i].className = '';          }
        }
      }

这种方式只需编写一个function，且无需依赖id，但仍需按顺序传递参数。

优化方案二：this指针法

第三种方法与第二种基本一致，区别在于传递的参数由序号改为this指针。

HTML结构示例。


<div class="tab-head">
      <h2 onmouseover="changeTab(this)" class="selected">1</h2>
      <h2 onmouseover="changeTab(this)">2</h2>
      <h2 onmouseover="changeTab(this)">3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JavaScript代码实现。


var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(tabs[i] === tab) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          } else {
            tabs[i].className = '';
            contents[i].className = '';
          }
        }
      }

此方式稍显便捷，只需传递this指针，无需计算序号，但并非最简便的方案。

最优解：完全分离法

接下来介绍最简便的一种实现方式。

第四种方式：最优解。

HTML结构示例。


<div class="tab-head">
      <h2 class="selected">1</h2>
      <h2>2</h2>
      <h2>3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JavaScript代码实现。


var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      (function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          tabs[i].onmouseover = showTab;
        }
      })();

      function showTab() {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(tabs[i] === this) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          } else {
            tabs[i].className = '';
            contents[i].className = '';
          }
        }
      }

该方案实现了JS、HTML与CSS的完全分离。通过this指针即可判断当前鼠标滑过的是哪个tab，逻辑清晰且易于维护。

至此，关于JavaScript实现Tab标签页切换的四种方式介绍完毕。如需了解更多相关内容，可搜索本站历史文章或继续浏览下方相关文章，感谢支持！

作者最新文章

anime.js 快速入门：怎么引入库并编写第一个 DOM 动画

2026-11-05 14:22:43

在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原

2026-11-04 20:26:01

怎么在浏览器中运行JavaScript代码并查看输出结果

2026-11-04 09:07:33

JS 获取屏幕分辨率：window.screen.width 与 height 用法

2026-11-04 08:52:48

为什么推荐用DOMContentLoaded代替window.onload初始化JS

2026-11-04 08:42:33