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

 更新时间:2013年08月01日 17:28:43   作者:  
这篇文章介绍了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> 

相关文章

  • jQuery使用hide方法隐藏页面上指定元素的方法

    jQuery使用hide方法隐藏页面上指定元素的方法

    这篇文章主要介绍了jQuery使用hide方法隐藏页面上指定元素的方法,涉及jQuery使用hide隐藏元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 基于jQuery实现响应式圆形图片轮播特效

    基于jQuery实现响应式圆形图片轮播特效

    这篇文章主要介绍了基于jQuery实现响应式圆形图片轮播特效,mislider插件可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery产品间断向下滚动效果核心代码

    jQuery产品间断向下滚动效果核心代码

    这篇文章主要为大家分享了jQuery产品间断向下滚动的核心代码,需要的朋友可以参考下
    2014-05-05
  • JQuery实现展开关闭层的方法

    JQuery实现展开关闭层的方法

    这篇文章主要介绍了JQuery实现展开关闭层的方法,实例分析了jQuery的slideToggle方法使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery复制节点用法示例(clone方法)

    jQuery复制节点用法示例(clone方法)

    这篇文章主要介绍了jQuery复制节点的方法,结合实例形式分析了clone方法复制节点及appendTo方法追加节点的相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery中getJSON跨域原理的深入讲解

    jQuery中getJSON跨域原理的深入讲解

    这篇文章主要给大家介绍了关于jQuery中getJSON跨域原理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • jQuery获取Table某列的值(推荐)

    jQuery获取Table某列的值(推荐)

    这篇文章主要介绍了jQuery获取Table某列的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • jQuery检测滚动条是否到达底部

    jQuery检测滚动条是否到达底部

    这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法,文中介绍了两种检测滚动条到达底部的状况,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jquery实现图片翻页效果

    jquery实现图片翻页效果

    jquery实现图片翻页效果,大家可以使用下面的方法
    2013-12-12
  • jquery中有哪些api jQuery主要API

    jquery中有哪些api jQuery主要API

    jquery有很多的API事件,本文小编给大家整理了jquery中最主要的API函数集合。
    2017-11-11

最新评论