谁能告诉我出了什么问题。这是我做的点击出现div框其他两个div消失的js效果。没效果
abc123456789def
2016-11-08 13:49
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
<style>
.dk{
width:500px;
height:600px;
background:#6e9a3e;
}
.dh{
width:100%;
height:30px;
border:1 solid red;
background:blue;
}
.neirong{
width:500px;
height:500px;
background:black;
}
#dy{
width:200px;
height:200px;
border:1 solid red;
background:green;
float:left;
}
#de{
width:200px;
height:200px;
border:1 solid red;
background:green;
float:left;
}
#ds{
width:200px;
height:200px;
border:1 solid red;
background:green;
float:left;
}
</style>
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var diyi=document.getElementById("dy");
var dier=document.getElementById("de");
var disan=document.getElementById("ds");
function recy(){
diyi.style.display="block";
dier.style.display="none";
disan.style.display="none";
}
function rece(){
diyi.style.display="none";
dier.style.display="block";
disan.style.display="none";
}
function recs(){
diyi.style.display="none";
dier.style.display="none";
disan.style.display="block";
}
</script>
</head>
<body>
<div class="dk">
<div class="dh">
<input type="button" name="button" value="出现第一个" onclick="recy()"/>
<input type="button" name="button" value="出现第二个" onclick="rece()"/>
<input type="button" name="button" value="出现第三个" onclick="recs()"/>
</div>
<div class="neirong">
<div id="dy">这是第一个内容</div>
<div id="de">这是第二个内容</div>
<div id="ds">这是第三个内容</div>
</div>
</div>
</body>
</html>
1回答
-
- Bran_Zuo
- 2016-11-08 14:20:21
function recy(){
dy.style.display="block";
de.style.display="none";
ds.style.display="none";
}
function rece(){
dy.style.display="none";
de.style.display="block";
ds.style.display="none";
}
function recs(){
dy.style.display="none";
de.style.display="none";
ds.style.display="block";
}
JavaScript入门篇
742052 学习 · 9869 问题
相似问题