先贴出示意图:
导航放在模板页里面,选择上面的页面的时候当前页面的导航背景显示为蓝色.
模板页内容:
CSS
CSS 这是样式表文件 < style type ="text/css" > #nav { height : 26px ; border-bottom : 2px solid #2788da ; list-style : none ; } #nav li { float : left ; } #nav li a { color : #000000 ; text-decoration : none ; padding-top : 4px ; display : block ; width : 120px ; height : 22px ; text-align : center ; background-color : #ececec ; margin-left : 2px ; } #nav li a:hover { background-color : #bbbbbb ; color : #ffffff ; } #nav li a#current { background-color : #2788da ; color : #fff ; } </ style >
HTML代码：
HTML < form id ="form1" runat ="server" > < div > < ul id ="nav" > < li >< a href ="Home.aspx" > HOME </ a > </ li > < li >< a href ="Aspnet.aspx" > ASP.NET </ a > </ li > < li >< a href ="PHP.aspx" > PHP </ a > </ li > < li >< a href ="#" > JAVASCRIPT </ a > </ li > < li >< a href ="#" > SEO </ a > </ li > < li >< a href ="#" > SQLSERVER </ a > </ li > < li >< a href ="#" > JQuery </ a > </ li > </ ul > < asp:ContentPlaceHolder ID ="ContentPlaceHolder1" runat ="server" > </ asp:ContentPlaceHolder > </ div > < script language ="javascript" type ="text/javascript" > var obj = null ; var As = document.getElementById( ' nav ' ).getElementsByTagName( ' a ' );obj = As[ 0 ]; for (i = 1 ;i < As.length;i ++ ){ if (window.location.href.indexOf(As[i].href) >= 0 ) obj = As[i];}obj.id = ' current ' </ script > </ form >
js代码根据当前的URL来改变导航<a>标签的id属性，从而改变当前页面的导航样式。
asp.net页面引用模板页之后，把导航<a>标签的URL修改为页面地址，功能实现。