Jquery 同辈元素选中/未选中效果
<!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>