分享几种比较简单实用的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 简单抽屉效果的实现代码
Mar 09 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js document.write()使用介绍
Feb 21 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
JQUERY dialog的用法详细解析
2013/12/19 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python实现连接mongodb的方法
2015/05/08 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python中turtle库的使用实例
2019/09/09 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python实现的分层随机抽样案例
2020/02/25 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
ktv好的活动方案
2014/08/17 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
农村党支部承诺书
2015/04/30 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
贫困证明怎么写
2015/06/16 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python