先贴出示意图:
导航放在模板页里面,选择上面的页面的时候当前页面的导航背景显示为蓝色.
模板页内容:
CSS
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
这是样式表文件
< 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 >
< 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代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
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 >
< 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修改为页面地址,功能实现。