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

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 国庆节 7
2021年 重阳节 20
2022年 元 旦 99
2022年 春 节 130
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    实现切换隐藏与显示同时切换图标功能
    内容摘要: 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);

    });

    });

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:js正则判断密码框密码强度代码 下一篇:js实现图片切割功能
    发布日期:2021/8/30
    手机扫二维码直达本页
    发布时间:14:38:46
    点击:258
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS V6.0.1 Build 21.9.2(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021