当前位置：首页 > 全部内容 > 正文

JavaScript实现选项卡切换功能详解与封装

作者：小圆点

时间：2026-10-30

浏览：169

本文详细解析了使用JavaScript实现选项卡切换功能的完整流程。从获取元素、绑定点击事件、控制显示隐藏，到利用自定义属性建立索引对应关系，逐步讲解核心逻辑。最后通过函数封装实现多选项卡复用，提供可复用的代码模板与注意事项。

文章目录

JavaScript选项卡实现原理

本文通过具体实例，详细讲解如何利用JavaScript实现选项卡功能，旨在为读者提供清晰的参考与学习思路。

核心思路在于：选项卡的本质是点击按钮后切换显示的内容区域。实现方式主要是利用CSS的display属性，通过设置为block或none来控制内容的显示与隐藏。

第一步，需要获取页面中相关的DOM元素。

第二步，使用for循环遍历所有按钮元素，并为每个按钮绑定onclick或onmousemove事件监听器。

第三步，当点击某个按钮时，该按钮应呈现高亮状态。因此，需要再次使用for循环遍历所有按钮，将其样式重置为空，并将所有关联的div元素的display属性设置为none以隐藏内容。

第四步，为当前被点击的按钮添加高亮样式，并将对应的div元素的display属性设置为block，使其显示出来。

注意：当需要为多个元素添加多个事件时，必须使用for循环进行遍历。例如，选项卡涉及点击切换、当前按钮高亮以及点击后按钮高亮等多个交互状态，因此通常需要两个独立的for循环来处理这些逻辑。

基础HTML与JS代码示例

以下是HTML结构代码示例：


<div id="box">
 <input type="button" value="1" />
 <input type="button" value="2" />
 <input type="button" value="3" />
 <input type="button" value="4" />
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

以下是配套的JavaScript代码逻辑：


<script>
 window.onload=function(){
  var box=document.getElementById('box');
  var input=box.getElementsByTagName('input');
  var div=box..getElementsByTagName('div');
  for(var i=0;i<input.length;i++){ //循环历遍onclick事件
   input[i].index=i; //input[0].index=0 index是自定义属性
   input[i].onclick=function(){
    for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
     input[i].className='';
     div[i].style.display='none';
    };
    this.className='active'; //当前按钮添加样式
    div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
   };
  };
  };
</script>

选项卡完整开发步骤与封装

补充说明：使用JavaScript编写简单选项卡的完整步骤解析。

如图所示，这是一个最基础且纯粹的选项卡界面示例。

JavaScript选项卡实现原理

第一步，编写HTML结构代码并定义CSS样式。


<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第二步，实现基础的切换交互效果。

关键点1：使用abc.document.getElementsByTagName("li")获取指定容器下所有li标签元素，该方法返回一个包含元素的集合，具备数组的部分属性。

关键点2：利用循环逻辑。首先遍历为每个li元素绑定onclick事件；当点击发生时，再次遍历移除所有选项卡的act样式并隐藏所有内容区域，最后仅显示当前点击的选项及其对应的内容。

关键点3：通过tab_t_li[i].index = i;在循环中为每个选项卡元素添加一个自定义属性index并赋值为当前索引i，以此建立选项卡与内容区域之间的对应关系。


<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第三步，将上述逻辑封装为函数。原有的写法仅支持单个页面使用一个选项卡，若需添加更多选项卡，则需复制代码并修改大量变量名，维护成本较高。

关键点：在tab_t_li[i][evt]中，由于传入的事件名是字符串，若直接写成tab_t_li[i]."onclick"会导致语法错误无法执行；而使用tab_t_li["onclick"]这种动态属性访问方式则能正确执行。

经过封装后，现在一个页面中可以存在多个选项卡实例。只需在调用函数时传入相应的ID名、标签名以及事件名称即可实现复用。


<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

希望本文所述的JavaScript程序设计内容能对读者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

JS使用classList动态添加、移除和切换CSS类名

在 D3.js 中实现平滑过渡动画的技巧

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法