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>