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>

赞 (0)

相关推荐

  • jQuery 学习6 操纵元素显示效果的函数

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Collapsible List — Take 1</title> <link rel="stylesheet" type="t

  • 基于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> <meta http-eq

  • jquery实现下拉框功能效果【实例代码】

    jquery实现下拉框功能效果【实例代码】

    说不清楚,直接上图 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin

  • 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"&

  • jquery根据一个值来选中select下的option实例代码

    jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

  • jquery实现表格中点击相应行变色功能效果【实例代码】

    jquery实现表格中点击相应行变色功能效果【实例代码】

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • Vue商品控件与购物车联动效果的实例代码

    本篇我们将构建商品控件与购物车联动. 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="

  • animate 实现滑动切换效果【实例代码】

    animate 实现滑动切换效果【实例代码】

    今天和大家分享一下用 animate 实现滑动切换效果的小例子 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: 1.slideDown() 2.slideUp() 3.slideToggle() 但是以上的滑动不太方便控制其滑动的方向,所以我们还是自己动手写一个吧... 其代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equ

  • JS实现仿UC浏览器前进后退效果的实例代码

    测试浏览器为谷歌浏览器(谷歌toggle device toolbar) var startx, starty, endx, endy, moveX, moveY, seatX, seatY; var clickState = false; //获取输入框dom元素 var text = document.forms["form"]; //设置样式 function setCss(obj) { var cssStr = "z-index:5;width:37px;height

  • javascript实现下雪效果【实例代码】

    原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

  • 微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,属于初级入门内容,仅供学习分享使用. 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城. 布局分析 布局分析图示如下: 涉及知识点 •scroll-view 可滚动视图区域.使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 hei

随机推荐