切换

来源：互联网发布：爰淘宝编辑：程序博客网时间：2024/05/16 01:11

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

.show{

width:100px;

height:100px;

background-color: red;

font-size:50px;

color: white;

display:block;

}

div{

display:none;

}

.active{

width:50;

height:20px;

background-color: yellow;

}

</style>

</head>

<body>

<inputtype="button" name="" id=""value="按钮1" />

<inputtype="button" name="" id=""value="按钮2" />

<inputtype="button" name="" id=""value="按钮3" />

<scripttype="text/javascript">

varaDiv = document.getElementsByTagName("div");

var aInput = document.getElementsByTagName("input");

// // 按钮1

// aInput[0].onclick = function (){

// for (var i = 0; i < aInput.length; i++) {

// aInput[i].className = "";

// aDiv[i].className = "";

// }

// aDiv[0].className = "show";

// aInput[0].className = "active";

// }

// aInput[1].onclick = function (){

// for (var i = 0; i < aInput.length; i++) {

// aInput[i].className = "";

// aDiv[i].className = "";

// }

// aDiv[1].className = "show";

// aInput[1].className = "active"; nn

// }

// aInput[2].onclick = function (){

// for (var i = 0; i < aInput.length; i++) {

// aInput[i].className = "";

// aDiv[i].className = "";

// }

// aDiv[2].className = "show";

// aInput[2].className = "active";

// }

// 为了绑定事件循环三次

for(var i = 0; i< aInput.length; i++) {

// 给input标签添加一个属性index 用于保存他的下标

aInput[i].index= i;

aInput[i].onclick= function (){

for(var j = 0; j< aInput.length; j++) {

// 先清除样式，再加样式

aInput[j].className= "";

aDiv[j].className= "";

}

this.className= "active";

aDiv[this.index].className= "show";

}

</script>

</body>

</html>

0 0