求个JQuery或者JS脚本,实现左导航点击栏目1,栏目1就换背景图片,点击栏目2,栏目1恢复原来的样子,栏目2
求个JQuery或者JS脚本,实现左导航点击栏目1,栏目1就换背景图片,栏目2不变,点击栏目2,栏目1恢复原来的样子,栏目2变背景图片...以下是左导航的表格<table...
求个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为变换图片
想实现的效果图...在线等..... 展开
以下是左导航的表格
<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我 我帮你
<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");
});
});
展开全部
$(document).ready(function(){
$("span").css("background-color","Blue");
$("span").click(function(){
$("span").css("background-color","Blue");
$(this).css("background-color","Red");
});
});
--------
类似这样的,代码的例子只是改变背景色,默认蓝,点后红.
你按你的需求改就行了,更换Class或者其他什么的.
"this"就是被点击的当前项
$("span").css("background-color","Blue");
$("span").click(function(){
$("span").css("background-color","Blue");
$(this).css("background-color","Red");
});
});
--------
类似这样的,代码的例子只是改变背景色,默认蓝,点后红.
你按你的需求改就行了,更换Class或者其他什么的.
"this"就是被点击的当前项
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询