频道切换效果

最新推荐文章于 2019-09-20 20:35:23 发布

蟹道人

最新推荐文章于 2019-09-20 20:35:23 发布

阅读量755

点赞数

分类专栏： javascript基础部分学习文章标签： javascript

本文链接：https://blog.csdn.net/csdt_csdt/article/details/18737261

版权

javascript基础部分学习专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<!--引入外部css-->
		<link rel = "stylesheet" href = "qiehuan.css" type = "text/css"/>
		<script language = "javascript" type = "text/javascript">
			<!--
				function change(val,obj){
					obj.style.backgroundColor = "#FFC12D";
					if(val == "zs"){
						zs.style.display = "block";
						rz.style.display = "none";
						cg.style.display = "none";
					}else if(val == "rz"){
						rz.style.display = "block";
						zs.style.display = "none";
						cg.style.display = "none";
					}else if(val == "cg"){
						cg.style.display = "block";
						zs.style.display = "none";
						rz.style.display = "none";
					}
				}
				
				function change2(obj){
					obj.style.background = "silver";
				}
			-->
		</script>
	</head>
	<body>
		<div class = "div1">
			<div class = "navi">
				<ul>
				  <li onmouseover = "change('zs',this)" onmouseout = "change2(this)">招生</li>	
				  <li onmouseover = "change('rz',this)" onmouseout = "change2(this)">热招</li>	
				  <li onmouseover = "change('cg',this)" onmouseout = "change2(this)">出国</li>	
				</ul>
			</div>
			<div id = "zs" class = "zs">
			<ul>
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
				<li><a href = "#">招生招生招生招生</a></li>	
			</ul>	
		</div>
		<div id = "rz" class = "rz">
			<ul>
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
				<li><a href = "#">热招热招热招热招</a></li>	
			</ul>	
		</div>
		<div id = "cg" class = "cg">
			<ul>
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
				<li><a href = "#">出国出国出国出国</a></li>	
			</ul>	
		</div>
	</div>
	</body>	
</html>

/*html选择器*/
body{
	font-size : 12px;
}
/*类选择器*/
 /*最外层div的样式*/
.div1{
	width:126px;
	height:156px;
	/*background-color:pink;	*/
}
 /*导航的div样式*/
.navi{
	width:21px;
	height:156px;
	/*background-color:blue;*/
	float:left;
}
 /*导航的div ul子样式*/
.navi ul{
	padding:0px;
	margin-top:0px;
	margin-left:0px;
	float:left;
}
 /*导航的div li子样式*/
.navi ul li{
	padding-top:8px;
	list-style-type:none;	
	float:left;
	width:21px;
	height:50px;
	margin-top:2px;
	text-align:center;
	background-color:silver;
}
 /*招生的div*/
.zs,.rz,.cg{
	float:left;
	margin-top:8px;
	margin-left:4px;
	width:100px;
	height:156px;	
	/*background-color:silver;*/
}
 /*招生的div ul*/
.zs ul,.rz ul,.cg ul{
 	padding:0px;
 	margin-top:0px;
 	margin-left:0px;
 	float:left;
}
 /*招生的div ul li*/
.zs ul li,.rz ul li,.cg ul li{
 	list-style-type:none;
 	line-height:20px;
}
 /*热招的div*/
.rz,.cg{
	display:none;
}