Jquery同輩元素選中/未選中效果的實(shí)例代碼
更新時(shí)間：2013年08月01日 17:28:43 作者：
這篇文章介紹了Jquery同輩元素選中/未選中效果的實(shí)例代碼，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery 同輩元素選中/未選中效果</title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function selectchange(tempid) {
var alink = $("#linktable").find("span");
alink.each(function () {
$(this).removeClass("templinkactive").addClass("templink");
});
$("#alink" + tempid).removeClass("templink").addClass("templinkactive");
}
</script>
<style type="text/css">
.templinkactive
{
padding:5px;
text-decoration:none;
background-color: #2788DA;
color:#ffffff;
}
.templink
{
cursor:pointer;
padding:5px;
text-decoration:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table width='100%' id="linktable">
<tr>
<td>
<span id="alink001" class='templink' onclick="javascript:selectchange('001');">
模板001(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink002" class='templink' onclick="javascript:selectchange('002');">
模板002(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink003" class='templink' onclick="javascript:selectchange('003');">
模板003(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink004" class='templink' onclick="javascript:selectchange('004');">
模板004(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink005" class='templink' onclick="javascript:selectchange('005');">
模板005(一行三列)</span>
</td>
</tr>
</table>
</form>
</body>
</html>
相關(guān)文章
下面介紹幾個(gè)jQuery常用的方法，來(lái)讓jQuery的威力發(fā)揮出來(lái)，否則只用有限的幾個(gè)方法，相對(duì)于運(yùn)行速度問(wèn)題，真不如不用jQuery2013-10-10
jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇jquery的ajax提交form表單的兩種方法小結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-05-05
本文用代碼的方式詳細(xì)講解了jQuery的DOM操作,具體操作方法請(qǐng)?jiān)敿?xì)參看代碼中的注釋部份2014-03-03
ashx文件與.aspx文件類(lèi)似，可以通過(guò)它來(lái)調(diào)用HttpHandler類(lèi)。下面與大家介紹下jquery訪問(wèn)ashx文件的過(guò)程2014-08-08
jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果,涉及jQuery結(jié)合時(shí)間函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
如何書(shū)寫(xiě)高質(zhì)量jQuery代碼(使用jquery性能問(wèn)題)
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁(yè)中也已經(jīng)開(kāi)始使用jQuery，今天總結(jié)下怎么書(shū)寫(xiě)更好的jQuery代碼使jQuery代碼更好、更快的執(zhí)行，希望本篇jQuery教程一改大家以前不合理的做法2014-06-06
分享一款基于jQuery在線問(wèn)卷答題系統(tǒng)代碼是一款實(shí)用的jQuery答題插件，點(diǎn)擊下一題切換帶有淡入淡出效果。2015-04-04
Jquery easyui開(kāi)啟行編輯模式增刪改操作
jquery easyui框架提供了創(chuàng)建網(wǎng)頁(yè)所需要的一切，可以幫助大家建立站點(diǎn)，接下來(lái)，通過(guò)本文給大家介紹Jquery easyui開(kāi)啟行編輯模式增刪改操作，感興趣的朋友一起學(xué)習(xí)2016-01-01
關(guān)于jQuery里prev()的簡(jiǎn)單操作代碼
這篇文章主要介紹了jQuery里prev()的簡(jiǎn)單操作代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
使用jQuery Mobile框架開(kāi)發(fā)移動(dòng)端Web App的入門(mén)教程
jQuery Mobile是移動(dòng)端的基于jQuery的Web前端開(kāi)發(fā)框架,移動(dòng)設(shè)備上的瀏覽器對(duì)HTML5的支持普遍較強(qiáng),因而jQuery Mobile的UI設(shè)計(jì)主要針對(duì)HTML5,下面就來(lái)詳細(xì)看一下使用jQuery Mobile框架開(kāi)發(fā)移動(dòng)端Web App的入門(mén)教程2016-05-05