<!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>
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
