Js中实现网页上导航条的切换功能_jsp导航栏实现页面切换-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现的网页导航切换效果。通过简单的鼠标悬停事件触发不同区块的内容显示与隐藏，并伴有背景颜色变化，增强用户体验。文章提供了完整的代码示例，便于读者理解和复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

daohanqiehuan.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>daohanqiehuan.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./daohanqiehuan.css">
    <script language="javascript" type="text/javascript">
		function qie(neirong){
			var zhao = document.getElementById("d3");
			var re =document.getElementById("d4");
			var zhao1 = document.getElementById("zs");
			var re1 =document.getElementById("rz");
			if(neirong=="zhaosheng"){
			//display 控制元素是否显示
				zhao.style.display = "block";
				re.style.display = "none";
				zhao1.style.backgroundColor="yellow";
				
			}
			else if(neirong=="rezhao"){
				zhao.style.display = "none";
				re.style.display = "block";
				re1.style.backgroundColor="yellow";
				
			}
			else if(neirong=="chuguo"){
			}
		}
		function qie1(obj){
			obj.style.backgroundColor="silver";
		}
    </script>

  </head>
  
  <body >
  <div class="div1">
  <div class="div2">
  <ul>
  <li id ="zs" onmousemove="qie('zhaosheng')" onmouseout="qie1(this)">招生</li>
  <li id ="rz" onmousemove="qie('rezhao')" onmouseout="qie1(this)">热招</li>
  <li onmousemove="qie('chuguo')">出国</li>
  </ul>
  </div>
  <div id="d3" class="div3">
  <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="d4" class="div4">
  <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><strong>
</strong>

daohanqiehuan.css

body{
	font-size:12px;
}
.div1{
	width :126px;
	height:156px;
/*	background-color:pink;*/
	float:left;
	padding:0px;
	
}

.div2{
	width:21px;
	height: 156px;
	float: left;
/*	background-color:green;*/
	padding:0px;
}

.div2 ul{
	width:21px;
	height: 150px;
	list-style-type :none;
	float:left;
	padding:0px;
	margin-left:0px;
	
}

.div2 li{
	width:21px;
	height: 47px;
	float:left;	
	background-color:silver;
/*	margin-top:10px;*/
	text-align : center;
	padding-top : 8px;
	margin-top:5px;
	
}

.div3,.div4{
		width:100px;
		height:156px;
		float:left;
		padding:0px;
/*		background-color:silver;*/
		margin-left:2px
}
.div3 ul,.div4 ul{
	width:100px;
	height:156px;
	float:left;
	list-style-type:none;
	padding:0px;
	margin-left:0px;
	
}
.div3 li,.div4 li{
	width:100px;
	heigth:18px;
	float:left;
	text-align:center;
/*	background-color:red;*/
	margin-top:6px;
	
}
.div4{
	display:none;
}