分享几种比较简单实用的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 TextArea动态显示剩余字符
Oct 22 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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 _autoload自动加载类与机制分析
2012/02/10 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
react-router实现按需加载
2017/05/09 Javascript
Vue自定义指令详解
2017/07/28 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python实现壁纸下载与轮换
2020/10/19 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
EJB timer的种类
2014/10/28 面试题
精通CAD能手自荐书
2014/01/31 职场文书
运动会入场式解说词
2014/02/18 职场文书
根叔历年演讲稿
2014/05/20 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014教师年度工作总结
2014/11/10 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang