<div class="codetitle"> <span><a style="CURSOR: pointer" data="51574" class="copybut" id="copybut51574" onclick="doCopy('code51574')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code51574"> <br> <br> <br> <br> <title>Jquery 同辈元素选中/未选中效果</title> <br> <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script> <br> <script type="text/javascript"> <BR> function selectchange(tempid) { <BR> var alink = $("#linktable").find("span"); <BR> alink.each(function () { <BR> $(this).removeClass("templinkactive").addClass("templink"); <BR> }); <BR> $("#alink" + tempid).removeClass("templink").addClass("templinkactive"); <BR> } <BR> </script> <br> <style type="text/css"> <BR> .templinkactive <BR> { <BR> padding:5px; <BR> text-decoration:none; <BR> background-color: #2788DA; <BR> color:#ffffff; <BR> } <BR> .templink <BR> { <BR> cursor:pointer; <BR> padding:5px; <BR> text-decoration:none; <BR> } <BR> </style> <br> <br> <br> <form id="form1" runat="server"> <br> <table width="100%" id="linktable"> <br> <tr> <br> <td> <br> <span id="alink001" class="templink" onclick="javascript:selectchange('001');"> <br> 模板001(一行三列)</span> <br> </td> <br> </tr> <br> <tr> <br> <td> <br> <span id="alink002" class="templink" onclick="javascript:selectchange('002');"> <br> 模板002(一行四列)</span> <br> </td> <br> </tr> <br> <tr> <br> <td> <br> <span id="alink003" class="templink" onclick="javascript:selectchange('003');"> <br> 模板003(一行三列)</span> <br> </td> <br> </tr> <br> <tr> <br> <td> <br> <span id="alink004" class="templink" onclick="javascript:selectchange('004');"> <br> 模板004(一行四列)</span> <br> </td> <br> </tr> <br> <tr> <br> <td> <br> <span id="alink005" class="templink" onclick="javascript:selectchange('005');"> <br> 模板005(一行三列)</span> <br> </td> <br> </tr> <br> </table> <br> </form> <br> <br> <br> </div>