编程 Javascript

Jquery同辈元素选中/未选中效果的实例代码

Posted in Javascript onAugust 01, 2013

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript的parseFloat()方法精度问题探讨

Nov 26 Javascript

浅析IE10兼容性问题(frameset的cols属性)

Jan 03 Javascript

Jquery 获取对象的几种方式介绍

Jan 17 Javascript

原生js获取宽高与jquery获取宽高的方法关系对比

Apr 04 Javascript

常用的jquery模板插件——jQuery Boilerplate介绍

Sep 23 Javascript

js全选按钮的实现方法

Nov 17 Javascript

基于javascript制作经典传统的拼图游戏

Mar 22 Javascript

再谈javascript注入黑客必备！

Sep 14 Javascript

AngularJS实现进度条功能示例

Jul 05 Javascript

vue2.0 兄弟组件(平级)通讯的实现代码

Jan 15 Javascript

5个你不知道的JavaScript字符串处理库(小结)

Jun 01 Javascript

JS如何寻找数组中心索引过程解析

Jun 01 Javascript

解决js数据包含加号+通过ajax传到后台时出现连接错误

Aug 01 #Javascript

Javascript 遮罩层和加载效果代码

Aug 01 #Javascript

JS防止用户多次提交的简单代码

Aug 01 #Javascript

纯文字版返回顶端的js代码

Aug 01 #Javascript

JS实现随机化快速排序的实例代码

Aug 01 #Javascript

js中的前绑定和后绑定详解

Aug 01 #Javascript

jQuery表单获取和失去焦点输入框提示效果的实例代码

Aug 01 #Javascript