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 相关文章推荐
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
You might like
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python encode和decode的妙用
2009/09/02 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python集合是否可变总结
2019/06/20 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python zip()函数使用方法解析
2019/10/31 Python
python连接PostgreSQL过程解析
2020/02/09 Python
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
创意活动策划书
2014/01/15 职场文书
大学生毕业求职信
2014/06/12 职场文书
本科毕业生求职信
2014/06/15 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
离婚协议书格式
2015/01/26 职场文书
2015年安全生产责任书
2015/01/30 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书