CSS学习(二)ASP.NET实现带当前标识的横向导航

先贴出示意图:

导航放在模板页里面,选择上面的页面的时候当前页面的导航背景显示为蓝色.

模板页内容:

　　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修改为页面地址，功能实现。

 

 

转载于:https://www.cnblogs.com/qixuejia/archive/2010/06/13/1757942.html