4种JavaScript实现简单tab选项卡切换的方法


Posted in Javascript onJanuary 06, 2016

本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下
效果图:

 4种JavaScript实现简单tab选项卡切换的方法

方法一:for循环+if判断当前点击与自定义数组是否匹配

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
 button {
  width:120px;
  height: 32px;
  line-height: 32px;
  background-color: #ccc;
  font-size: 24px;
 }
 div {
  display: none;
  width:200px;
  height: 200px;
  font-size: 72px;
  color:#ddd;
  background-color: green;
  border:1px solid black;
 }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //定义数组并获取数组内各个的节点
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i++) {
 buttonArr[i].onclick = function() {
  //this 
  // alert(this.innerHTML)
  //for循环遍历button数组长度
  for(var j = 0; j < buttonArr.length; j++) {
  //重置所有的button样式
  buttonArr[j].style.backgroundColor = "#ccc";
  //给当前的(点击的那个)那个button添加样式
  this.style.backgroundColor = "yellow";
  //隐藏所有的div
  divArr[j].style.display = "none";
  //判断当前点击是按钮数组中的哪一个?
  if(this == buttonArr[j]) {
   // alert(j);
   //显示点击按钮对应的div
   divArr[j].style.display = "block";
  }
  }
 }
 }
 </script>
</body>
</html>

方法二:自定义index为当前点击

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
 button {
  width:120px;
  height: 32px;
  line-height: 32px;
  background-color: #ccc;
  font-size: 24px;
 }
 div {
  display: none;
  width:200px;
  height: 200px;
  font-size: 72px;
  color:#ddd;
  background-color: green;
  border:1px solid black;
 }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i++) {
 buttonArr[i].index = i;
 // buttonArr[i].setAttribute("index",i);
 buttonArr[i].onclick = function() {
  for(var j = 0; j < buttonArr.length; j++) {
  buttonArr[j].style.backgroundColor = "#ccc";
  buttonArr[this.index].style.backgroundColor = "yellow";
  divArr[j].style.display = "none";
  divArr[this.index].style.display = "block";
  }
 }
 }
 
 </script>
</body>
</html>

方法三:className

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab</title>
 <style type="text/css">
 * {padding:0; margin:0;}
 button {
  background-color: #ccc;
  width:80px;
  height: 30px;
 }
 .btn-active {
  background-color: yellow;
  font-weight:bold;
  font-size: 14px;
 }
 div{
  width:200px;
  height: 200px;
  font-size: 64px;
  background-color: #0c0;
  display: none;
  color:#fff;
 }
 .div-active {
  display: block;
 }
 </style>
</head>
<body>
 <button class="btn-active">按钮1</button>
 <button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <div class="div-active">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //1.先获取元素
 var buttonList = document.getElementsByTagName("button");
 var divList = document.getElementsByTagName("div");
 //2.添加事件
 for(var i = 0; i < buttonList.length; i++) {
 buttonList[i].index = i;
 buttonList[i].onclick = function() {
  for(var j = 0; j < buttonList.length;j++) {
  buttonList[j].className = "";
  divList[j].className = "";
  }
  this.className = "btn-active";
  divList[this.index].className = "div-active";
 }
 }
 </script>
</body>
</html>

方法四:className+匿名函数的自执行

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab</title>
 <style type="text/css">
 * {padding:0; margin:0;}
 button {
  background-color: #ccc;
  width:80px;
  height: 30px;
 }
 .btn-active {
  background-color: yellow;
  font-weight:bold;
  font-size: 14px;
 }
 div{
  width:200px;
  height: 200px;
  font-size: 64px;
  background-color: #0c0;
  display: none;
  color:#fff;
 }
 .div-active {
  display: block;
 }
 </style>
</head>
<body>
 <button class="btn-active">按钮1</button>
 <button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <div class="div-active">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //1.先获取元素
 var buttonList = document.getElementsByTagName("button");
 var divList = document.getElementsByTagName("div");
 //2.添加事件
 for(var i = 0; i < buttonList.length; i++) {
 (function(i){ //匿名函数自执行
  buttonList[i].onclick = function() {
  for(var j = 0; j < buttonList.length;j++) {
   buttonList[j].className = "";
   divList[j].className = "";
  }
  this.className = "btn-active";
  divList[i].className = "div-active";
  }
 })(i)
 }
 </script>
</body>
</html>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 #Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 #Javascript
javascript中闭包(Closure)详解
Jan 06 #Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 #Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 #Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
图解js图片轮播效果
2015/12/20 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Node.js复制文件的方法示例
2016/12/29 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python完全新手教程
2007/02/08 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
python调用win32接口进行截图的示例
2020/11/11 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
大专学生求职信
2014/07/04 职场文书
2014年教师节寄语
2014/08/11 职场文书
2014年残联工作总结
2014/11/21 职场文书
2014年平安夜寄语
2014/12/08 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL