分享几种比较简单实用的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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 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
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
分享10段PHP常用代码
2015/11/11 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
详解微信UnionID作用
2019/05/15 Javascript
vue实现搜索功能
2019/05/28 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python常用知识点汇总
2016/05/08 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
安全演讲稿开场白
2014/08/25 职场文书
责任书范本
2014/08/25 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL