分享几种比较简单实用的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 操作文件 实现方法小结
Jul 02 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 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打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python实现自动整理文件的脚本
2020/12/17 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
Java基础面试题
2012/11/02 面试题
党组织领导班子整改方案
2014/10/25 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
大二学年个人总结
2015/03/03 职场文书
农村党支部承诺书
2015/04/30 职场文书
可怜妈妈观后感
2015/06/09 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库