<html>
<head>
<title>点击切换</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#head{height:56px;}
span{
float:left;
margin:20px 10px 0px 10px;
padding:10px;
font-weight:bold;
font-size:14px;
color:white;
}
.nr
{
height:400px;
width:350px;
display:none;
}
#nr1
{
display:block;
}
</style>
<script type="text/javascript">
function changes(c1)
{
alert("heillo");
var a = document.getElementById("neirong");
var b = document.getElementById(c1);
var as = a.getElementsByTagName("div");
alert("heillo");
for(var i=0;i<as.length;i++)
{
as[i].style.display="none";
}
b.style.display="block";
}
</script>
</head>
<body>
<div id="head">
<span style="background-color:#C0F;" onclick="changes('nr1')">点击紫色</span>
<span style="background-color:#09C;" onclick="changes('nr2')">点击蓝色</span>
<span style="background-color:#666;" onclick="changes('nr3')">点击灰色</span>
</div>
<div id="neirong">
<div class="nr" id="nr1" style="background-color:#C0F"></div>
<div class="nr" id="nr2" style="background-color:#09C"></div>
<div class="nr" id="nr3" style="background-color:#666"></div>
</div>
<div>会不会影响我</div>
</body>
</html>点击切换内容【2018.11.24】
猜你喜欢
转载自blog.csdn.net/weixin_30589127/article/details/84442692
今日推荐
周排行