分享几种比较简单实用的JavaScript tabel切换

时间：2021-05-25

闲着没事,随便写了个简单的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切换，希望大家喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章