分享几种比较简单实用的JavaScript tabel切换


Posted in Javascript onDecember 31, 2015

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧

分享几种比较简单实用的JavaScript tabel切换

方法一: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 tabel切换,希望大家喜欢。

Javascript 相关文章推荐
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 #Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 #Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php检测useragent版本示例
2014/03/24 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
vue.js 获取select中的value实例
2018/03/01 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
基于pip install django失败时的解决方法
2018/06/12 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python argparse模块使用方法解析
2020/02/20 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
高级工程师岗位职责
2013/12/15 职场文书
暑期培训班策划方案
2014/08/26 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
旅游安全责任协议书
2016/03/22 职场文书