分享几种比较简单实用的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";//隐藏所有的divdivArr[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切换，希望大家喜欢。