点击切换内容【2018.11.24】

最新推荐文章于 2023-12-19 10:17:04 发布

冰零界点

最新推荐文章于 2023-12-19 10:17:04 发布

阅读量157

点赞数

分类专栏： javascript 每日一练

javascript 每日一练专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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>

冰零界点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击切换内容【2018.11.24】

&lt;html&gt;&lt;head&gt; &lt;title&gt;点击切换&lt;/title&gt; &lt;style type="text/css"&gt; *{margin:0px;padding:0px;} #head{height:56px;} span{ float:left; margin:20px 10px 0px 10px; ...
复制链接

扫一扫

专栏目录