4种JavaScript实现简单tab选项卡切换的方法

2019-11-20 10:51:17

字体：大中小

来源：转载

供稿：网友

本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法，分享给大家供大家参考，具体内容如下
效果图：

方法一：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选项卡操作方法汇总 jquery选项卡操作方法汇总

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：JavaScript类型系统之基本数据类型与包装类型

下一篇：js针对ip地址、子网掩码、网关的逻辑性判断