Js中实现网页上导航条的切换功能

柔光的暖阳◎ 2022-08-21 11:58 83阅读 0赞

**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" οnmοusemοve="qie('zhaosheng')" οnmοuseοut="qie1(this)">招生</li>
      <li id ="rz" οnmοusemοve="qie('rezhao')" οnmοuseοut="qie1(this)">热招</li>
      <li οnmοusemοve="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;
    }