求个JQuery或者JS脚本,实现左导航点击栏目1,栏目1就换背景图片,栏目2不变,点击栏目2,栏目1恢复原来的样子,栏目2变背景图片...
以下是左导航的表格
<table width="210" border="0" cellspacing="0" cellpadding="0">
<%
sql="select ID,NavTitle from [NewsClass] where NavParent=4 order by NavOrder"
set Rs=server.CreateObject("Adodb.Recordset")
Rs.open sql,Conn,1,1
Do While Not Rs.Eof
%>
<tr>
<td onMouseOver="this.id='td3'" onMouseOut="this.id='td4'" height="29" background="images/huis.jpg" class="left" align="left"><a href="?ClassID=<%=Rs("ID")%>"><div onclick='chgColor(this)'><%=Rs("NavTitle")%></div></a></td>
</tr>
<%
Rs.MoveNext
Loop
Rs.Close
%>
</table>
目前只是鼠标移动的话变背景图片,点击后,右边内容显示了,可是导航当前没变换..鼠标移走就便回老样子了...网上找的区试了下,都没调出来..代码基础老差,...求个好心人帮忙...
CSS:
#td3{
background:url(../images/yel.jpg);
}
.td3{
background:url(../images/yel.jpg);
}
#td4{
background:url(../images/huis.jpg);
}
.td4{
background:url(../images/huis.jpg);
}
huis.jpg为元背景图片
yel.jpg为变换图片
想实现的效果图...在线等.....
...我左导航栏目数量不是死的,要怎么确定ID啊?
追答那还是推荐jquery了。
1 给table设置个id 比如tableid
2 为td添加click事件。
$(document).ready(function(){
$("#tableid td").onclick(function(){
$("#tableid td").addClass("td3");
$(this).removeClass("td4");
$(this).addClass("td4");
});
});