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 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
深入理解js中的加载事件
Feb 08 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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
使用php判断网页是否gzip压缩
2013/06/25 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python 多进程队列数据处理详解
2019/12/23 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
临床医师个人自我评价
2014/04/06 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
小学校本教研总结
2015/08/13 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript