您的位置：首页 > 其它

按钮切换

2016-07-12 08:21 225 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
div{
width:
200px;
height:
200px;
background-color: red;
display:
none;
}
.div2{
display:
block;
}
p{
color: white;
font-size:
25px;
}
</style>
</head>
<body>
<input
type="button"
name="btn1" id="btn1"
value="按钮1" />
<input
type="button"
name="btn2" id="btn2"
value="按钮2" />
<input
type="button"
name="btn3" id="btn3"
value="按钮3" />
<div
id="div1">
<p>A</p>
</div>
<div
id="div3">
<p>B</p>
</div>
<div
id="div4">
<p>C</p>
</div>

<script
type="text/javascript">
var
oBtn1 = document.getElementById("btn1");
var oBtn2
= document.getElementById("btn2");
var oBtn3
= document.getElementById("btn3");
var oDiv1
= document.getElementById("div1");
var oDiv3
= document.getElementById("div3");
var oDiv4
= document.getElementById("div4");
oBtn1.onclick
= function(){
oDiv1.className
= "div2";
oDiv3.className
= "";
oDiv4.className
= "";
}
oBtn2.onclick
= function(){
oDiv3.className
= "div2";
oDiv1.className
= "";
oDiv4.className
= "";
}
oBtn3.onclick
= function(){
oDiv4.className
= "div2";
oDiv1.className
= "";
oDiv3.className
= "";
}
</script>
</body>
</html>

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

标签： 切换

相关文章推荐

新的分享

章节导航