首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

分享几种比较简单实用的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 tabel切换

- Author -

Cakty、Riven

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
JQuery小知识
Oct 15 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
分词器(1) for(1) 贪吃蛇(2) SnakeGame(1) cvzone(1) 无限迭代(1) mediapipe(1) python小游戏(5) 计算机视觉(2) while(1)
You might like
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
初识Javascript小结
2015/07/16 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
django框架中间件原理与用法详解
2019/12/10 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python退出循环的方法
2020/06/18 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
毕业生自荐信
2013/12/14 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
先进工作者获奖感言
2014/02/08 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年服务员工作总结
2015/04/08 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript