Jquery同輩元素選中/未選中效果的實(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)文章
下面介紹幾個jQuery常用的方法，來讓jQuery的威力發(fā)揮出來，否則只用有限的幾個方法，相對于運(yùn)行速度問題，真不如不用jQuery2013-10-10
jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
下面小編就為大家?guī)硪黄猨query的ajax提交form表單的兩種方法小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考2016-05-05
本文用代碼的方式詳細(xì)講解了jQuery的DOM操作,具體操作方法請?jiān)敿?xì)參看代碼中的注釋部份2014-03-03
ashx文件與.aspx文件類似，可以通過它來調(diào)用HttpHandler類。下面與大家介紹下jquery訪問ashx文件的過程2014-08-08
jQuery實(shí)現(xiàn)的左右移動焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動焦點(diǎn)圖效果,涉及jQuery結(jié)合時間函數(shù)響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
如何書寫高質(zhì)量jQuery代碼(使用jquery性能問題)
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁中也已經(jīng)開始使用jQuery，今天總結(jié)下怎么書寫更好的jQuery代碼使jQuery代碼更好、更快的執(zhí)行，希望本篇jQuery教程一改大家以前不合理的做法2014-06-06
分享一款基于jQuery在線問卷答題系統(tǒng)代碼是一款實(shí)用的jQuery答題插件，點(diǎn)擊下一題切換帶有淡入淡出效果。2015-04-04
jquery easyui框架提供了創(chuàng)建網(wǎng)頁所需要的一切，可以幫助大家建立站點(diǎn)，接下來，通過本文給大家介紹Jquery easyui開啟行編輯模式增刪改操作，感興趣的朋友一起學(xué)習(xí)2016-01-01
這篇文章主要介紹了jQuery里prev()的簡單操作代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
使用jQuery Mobile框架開發(fā)移動端Web App的入門教程
jQuery Mobile是移動端的基于jQuery的Web前端開發(fā)框架,移動設(shè)備上的瀏覽器對HTML5的支持普遍較強(qiáng),因而jQuery Mobile的UI設(shè)計(jì)主要針對HTML5,下面就來詳細(xì)看一下使用jQuery Mobile框架開發(fā)移動端Web App的入門教程2016-05-05