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 语言的递归编程
May 18 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jquery遍历json对象集合详解
May 18 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
node+vue实现文件上传功能
May 28 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
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
实现python版本的按任意键继续/退出
2016/09/26 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
关于python多重赋值的小问题
2019/04/17 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
业务助理岗位职责
2013/11/18 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
投资意向书
2014/07/30 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书