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

先贴出示意图:

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

模板页内容:

　　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代码：

 

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