分享几种比较简单实用的JavaScript tabel切换
2015-12-31 00:00
736 查看
闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧
方法一:for循环+if判断当前点击与自定义数组是否匹配
方法二:自定义index为当前点击
方法三:className
方法四:className+匿名函数的自执行!
以上内容是小编给大家分享几种比较简单实用的JavaScript tabel切换,希望大家喜欢。
js无刷新操作table的行和列
Js实现动态添加删除Table行示例
C#中把Datatable转换为Json的5个代码实例
jquery easyui 结合jsp简单展现table数据示例
利用js***html table分页示例(js实现分页)
JavaScript获取table中某一列的值的方法
JQuery实现table行折叠效果以JSON做数据源
通过Jquery的Ajax方法读取将table转换为Json
JS使用for循环遍历Table的所有单元格内容
C#中的DataSet、string、DataTable、对象转换成Json的实现代码
JS动态添加Table的TR,TD实现方法
JS获取Table中td值的方法
方法一: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切换,希望大家喜欢。
您可能感兴趣的文章:
js对table的td进行相同内容合并示例详解js无刷新操作table的行和列
Js实现动态添加删除Table行示例
C#中把Datatable转换为Json的5个代码实例
jquery easyui 结合jsp简单展现table数据示例
利用js***html table分页示例(js实现分页)
JavaScript获取table中某一列的值的方法
JQuery实现table行折叠效果以JSON做数据源
通过Jquery的Ajax方法读取将table转换为Json
JS使用for循环遍历Table的所有单元格内容
C#中的DataSet、string、DataTable、对象转换成Json的实现代码
JS动态添加Table的TR,TD实现方法
JS获取Table中td值的方法
相关文章推荐
- javascript实现input file上传图片预览效果
- 常见的javascript跨域通信方法
- 21个值得收藏的Javascript技巧
- highlight.js在项目中的使用
- JSON.parse()方法
- 实现ListView图文混排 ——解析JSON到List中
- JavaScript基础——JSON
- jsonp解决CORS问题
- ajax提交json数据,后台解析问题
- javascript中的this到底是神马
- JS生成二维码(兼容各种浏览器及中文)
- js中关于导航切换效果-之二(使用定时器自动切换)
- layer.js
- js中关于导航切换效果-之一(鼠标移动)
- js中 关于复选框的多选和反选
- js关于省市的二级下拉菜单联动
- 怎样使用jsp实现header和footer与网页内容的分离
- jsp:include怎么设置才能正确显示包含的页面呢
- JavaScript的闭包
- 实现ListView图文混排 —— 获取Json数据