网页部分
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="css/css1.css" rel="stylesheet" /> <script src="js/js1.js"></script> </head> <body> <form id="form1" runat="server"> <div id="map"> <a href="index.aspx"><div class="choice" style="background-color:gray;">首页</div></a> <a href="product.aspx"><div class="choice">产品展示</div></a> <a href="about.aspx"> <div class="choice">关于我们</div></a> <a href="telephone.aspx"> <div class="choice">联系我们</div></a> <a href="join.aspx"><div class="choice">加入我们</div></a> </div> <br /> <h1>这是主页！！！！</h1> </form> </body> </html>
js部分
window.onload = function () { var oDivs = document.getElementsByClassName('choice'); for (var i = 0; i < oDivs.length; i++) { if (oDivs[i].style.backgroundColor !='gray') { oDivs[i].onmouseover = function () { this.style.backgroundColor = '#0ff'; } oDivs[i].onmouseout = function () { this.style.backgroundColor = 'blue'; } } } }//onload结束
css部分
* { padding:0px; margin:0px; } #map { 580px; height:50px; position:relative; margin:0 auto; } .choice { 100px; height:50px; position:relative; float:left; margin-left:5px; font-family:微软雅黑; color:white; text-align:center; line-height:50px; background-color: blue; }
