为了实现最主要的功能，只写了一个粗糙的案例
CSS样式
ul,li{ list-style-type:none;} .nav { width: 100%; height: 35px; line-height: 35px; } .nav ul{ width:100%; float:left;} .nav li{ width:100px; float:left; text-align:center;} .nav li a, .nav li a:link { background-color: #C0C0C0; color: #000000; text-decoration:none; display:block; } .nav .hover { background-color: #808080; color: #0000FF; text-decoration: none; display:block; }
HTML及js代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <link href="style/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $(".nav ul li a").each(function () { if ($($(this))[0].href == String(window.location)) { $(this).addClass("hover"); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="nav"> <ul> <li><a href="Default.aspx?id=1">显示1</a></li> <li><a href="Default.aspx?id=2">显示2</a></li> <li><a href="Default.aspx?id=3">显示3</a></li> <li><a href="Default.aspx?id=4">显示4</a></li> <li><a href="Default.aspx?id=5">显示5</a></li> </ul> </div> </form> </body> </html>
最终效果图: