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

zhouxin464585932

浏览: 80504 次
性别:
来自: 南京

最近访客更多访客>>

reece

joker.

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (102)

社区版块

存档分类

JavaScript CSS jQuery MVC 浏览器

<%@ 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;
}