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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
AngularJS Controller作用域
Jan 09 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
javascript数组去重方法总结(推荐)
Mar 20 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
Mysql的常用命令
2006/10/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
详解使用React制作一个模态框
2019/03/14 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python中的super()方法使用简介
2015/08/14 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python yield的用法实例分析
2020/03/06 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
联想C++笔试题
2012/06/13 面试题
工程售后服务承诺书
2014/05/21 职场文书
支部组织生活会方案
2014/06/10 职场文书
党章培训心得体会
2014/09/04 职场文书
金砖之国观后感
2015/06/11 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers