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

2019-11-20 10:53:11

字体：大中小

来源：转载

供稿：网友

闲着没事,随便写了个简单的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实现input file上传图片预览效果

下一篇：jQuery+ajax实现文章点赞功能的方法