<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br><head runat="server"> <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> 背景色: #2788DA; <br> color:#ffffff; <br> } <br> .templink <br> { <br> カーソル:ポインタ; <br> パディング:5px; <br> text-decoration:none; <br> } <br> </style> <br></head> <br> <br> <form id="form1" runat="server"> <br> <テーブル幅='100%' id="リンクテーブル"> <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></body> <br></html> <br> </div>
