方法一：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>
__Phone状态分析)
