求个JQuery或者JS脚本,实现左导航点击栏目1,栏目1就换背景图片,点击栏目2,栏目1恢复原来的样子,栏目2

求个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为变换图片
想实现的效果图...在线等.....

你这个和jquery没关吧。你直接在onmouseover事件中加的。
<style type="text/css">
.class1{ background-color:#FF0000}
.class2{ background-color:#00ff00}
</style>
</head>

<body>
<table border="1">
<tr>
<td id="td1" onclick="this.className='class1';td2.className='class2';" width="300">aaa</td>
<td id="td2" onclick="this.className='class1';td1.className='class2';" width="300">bbb</td>
</tr>
</table>
手写的代码 希望能有启发。如果你不是用jquery 你得为td设置个id。通过id来控制不同的显示。

如果还是不会 可以百度hi我 我帮你追问

...我左导航栏目数量不是死的,要怎么确定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");
});
});

温馨提示:内容为网友见解,仅供参考
第1个回答  2011-10-13
$(document).ready(function(){
$("span").css("background-color","Blue");
$("span").click(function(){
$("span").css("background-color","Blue");
$(this).css("background-color","Red");
});
});
--------
类似这样的,代码的例子只是改变背景色,默认蓝,点后红.
你按你的需求改就行了,更换Class或者其他什么的.
"this"就是被点击的当前项
相似回答