关于导航条的作法：鼠标点后背景改变

最新推荐文章于 2022-10-18 17:04:45 发布

昕颖

最新推荐文章于 2022-10-18 17:04:45 发布

阅读量1.3k

点赞数

分类专栏： C#技术文档文章标签： stylesheet class url border javascript action

本文链接：https://blog.csdn.net/zhouxin464585932/article/details/4543462

版权

C#技术文档专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<link href="../../Content/Index.css" rel="Stylesheet" type="text/css" />
<link href="../../Content/isnew.css" rel="Stylesheet" type="text/css" />
<table align="center" class="HeadTable">
        <tr>
            <td valign="top" colspan="2" >
            <table class="Navigation">
                    <tr>
                        <td valign="middle" id="Index" class="MenuTdDefault" align="center">
                            <a href="/Home/Index" id="aIndex" >首页</a>
                        </td>
                        <td valign="middle" id="About" class="MenuTdDefault" align="center">
                            <a href="/Home/About" id="aAbout" >关于Disc</a>
                        </td>
                        <td valign="middle" id="Instruct" class="MenuTdDefault" align="center">
                            <a href="/Home/Instruct" id="aInstruct">影印流程</a>
                        </td>
                        <td valign="middle" id="ServerPrice" class="MenuTdDefault" align="center">
                            <a href="/Home/ServerPrice" id="aServerPrice">服务报价</a>
                        </td>
                        <td valign="middle" id="" class="MenuTdDefault" align="center">
                            <a href="#">业务范围</a>
                        </td>
                        <td valign="middle" id="CustomerServerSit" class="MenuTdDefault" align="center">
                            <a href="/Home/CustomerServerSit" id="aCustomerServerSit">客户服务</a>
                        </td>
                        <td valign="middle" id="JoinIn" class="MenuTdDefault" align="center">
                            <a href="/Home/JoinIn" id="aJoinIn">加盟合作</a>
                        </td>
                    </tr>
                </table>

           </td>
          </tr>
</table>

$(AddClass);

function AddClass()
{
//var url = window.location.href;//获取浏览器的地址
var url= document.location.href
var name=url.split('/');//以/分开成数组
var Urlname=name[name.length-1];//页面地址的值
if(Urlname=="Default.aspx"||Urlname=="")//如果是首次使用的话action就赋值为Index
{
   Urlname="Index";
}
   var tdname="#"+Urlname;
   var aname="#a"+Urlname;
   $(tdname).removeClass();//移去Td的样式
   $(tdname).addClass("MenuTD");//给指定的TD写入新的样式
   $(aname).attr("style","color:White");//给a标签写入新的样式
}

</script>

样式文件：

.MainTable{background-image:url(Image/background.png); background-repeat:no-repeat; width:950px;/*height:705px;*/ margin-top:0px; padding:0px}
/*.HeadTable{background-image:url(Image/head.png); background-repeat:no-repeat; width:950px;height:196px; margin-top:0px; padding:0px}*/
.HeadTable{background-image:url(Image/head.png); background-repeat:no-repeat;width:950px;height:177px; padding:0px}
.HeadTableRandam{background-image:url(Image/head.png); background-repeat:no-repeat;width:100%;height:177px; padding:0px}
.BottomTable{background-image:url(Image/bottom.png); background-repeat:no-repeat; width:950px;height:130px;margin:auto; margin-top:0px; padding:0px}
.Navigation{margin-top:125px; margin-left:220px}
.Navigation td{padding-right:10px}
.Button{background-image:url(Image/buttomblack.png); background-repeat:no-repeat; width:68px; height:23px; border:0px; color:White; font-weight:bold}
.Button1{background-image:url(Image/buttomgray.png); background-repeat:no-repeat; width:69px; height:23px; border:0px; color:#666666; font-weight:bold; font-size:11px}

.surNavigation{ padding:95px 4px 0 0;}

.tdClass { border-bottom:1px solid #BEC2C3; padding:10px; vertical-align:top; }
.title { color:#666666; font-size:13px; font-weight:bold; padding-top:10px; }
.span_info { font-size:12px; color:#737476; margin:10px; }

.MenuTD
{
    background-image: url(../../Content/Image/buttomblack.png);
    background-repeat: no-repeat;
    width: 68px;
    height: 23px;
    border: 0px;
    color: White;
    font-weight: bold;
    font-size: 13px;
}
.MenuTdDefault
{
    background-image: url(../../Content/Image/buttomgray.png);
    background-repeat: no-repeat;
    width: 69px;
    height: 23px;
    border: 0px;
    color: #666666;
    font-weight: bold;
    font-size: 13px;
}
.Navigation td a:link
{
    color: #666666;
    text-decoration: none;
}
.Navigation td a:visited
{
    color: #666666;
    text-decoration: none;
}
.Navigation td a:hover
{
    color: #FF0000;
    text-decoration: none;
}
.Navigation td a:active
{
    color: #666666;
    text-decoration: none;
}