熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Jquery同輩元素選中/未選中效果的實例代碼

2013-11-15 12:08:07  來源: JSP教程 
這篇文章介紹了Jquery同輩元素選中/未選中效果的實例代碼有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<!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> 


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20366.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.