您的位置：首页 > Web前端 > JavaScript

切换

2016-07-12 08:26 302 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="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>

<input
type="button"
name="" id=""
value="按钮1" />
<input
type="button"
name="" id=""
value="按钮2" />
<input
type="button"
name="" id=""
value="按钮3" />

<div class="show">A</div>
<div>B</div>
<div>C</div>

<script
type="text/javascript">
var
aDiv = 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 切换 js

相关文章推荐

新的分享

章节导航