<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head runat="server">
<title>Jquery 同辈元素选中/未选中效果</title>
<script language="javascript" type="text/javascript" src="Scripts/jqueryminjs"></script>
<script type="text/javascript">
function selectchange(tempid) {
var alink = $("#linktable")find("span");
alinkeach(function () {
$(this)removeClass("templinkactive")addClass("templink");
});
$("#alink" + tempid)removeClass("templink")addClass("templinkactive");
}
</script>
<style type="text/css">
templinkactive
{
padding:px;
textdecoration:none;
backgroundcolor: #DA;
color:#ffffff;
}
templink
{
cursor:pointer;
padding:px;
textdecoration:none;
}
</style>
</head>
<body>
<form id="form" runat="server">
<table width=% id="linktable">
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
</table>
</form>
</body>
</html>
