您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    jQuery实现切换隐藏与显示同时切换图标功能
    内容摘要: HTML代码:!doctypehtmlhtmlheadmetacharset='utf-8'titlejq隐藏显示图标切换/title!--引入jq文件--scripttype='text/javascript'scr='./js/jquery.min.js'/script/headbody!--隐藏/显示控制按钮--divimgid='ctr'scr='.......
    HTML代码:

    <!doctypehtml>

    <html>

    <head>

    <metacharset="utf-8">

    <title>jq隐藏显示图标切换</title>

    <!--引入jq文件-->

    <scripttype="text/javascript"scr="./js/jquery.min.js"></script>

    </head>

    <body>

    <!--隐藏/显示控制按钮-->

    <div><imgid="ctr"scr="./images/01.jpg"></div>

    <!--被控制元素-->

    <pid="info"style="display:none;">这里是要显示或隐藏的内容</p>

    </body>

    </html>

    JS代码:

    $(document).ready(function(){

    //通过id="ctr"获取元素click事件

    $("#ctr").click(function(){

    //将显示和隐藏两个状态下的显示图标路径放入images变量中

    varimages=['./images/01.jpg','./images/02.jpg'];

    //通过class的值来判断控制显示的图标样式

    if($("#ctr").attr("class")=="down"){

    $("#ctr").attr("src",images[0]);

    $("#ctr").removeClass();

    }else{

    $("#ctr").attr("src",images[1]);

    $("#ctr").addClass("down");

    }

    //用于控制元素的隐藏或显示主要方法toggle(),300是控制元素显示或隐藏的速度

    $("#info").toggle(300);

    });

    });

    上一篇:jQuery实现点击下拉框中的值累加到文本框中的方法 下一篇:JavaScript实现动态生成表格案例详解
    发布日期:2021/12/21
    手机扫二维码直达本页
    发布时间:11:58:30
    点击:198
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022