jQuery实现切换隐藏与显示同时切换图标功能


Posted in jQuery onOctober 29, 2017

HTML代码:

<!doctype html>
<html>
<head> 
<meta charset=" utf-8"> 
<title>jq隐藏显示图标切换</title>
 <!--引入jq文件-->
<script type="text/javascript" scr="./js/jquery.min.js"></script>
</head>
<body>
<!--隐藏/显示 控制按钮-->
<div><img id="ctr" scr="./images/01.jpg"></div>
<!--被控制元素-->
<p id="info" style="display:none;">这里是要显示或隐藏的内容</p>
</body>
</html>

 

 JS代码:

$(document).ready(function(){
//通过id="ctr"获取元素click事件
   $("#ctr").click(function(){
//将显示和隐藏两个状态下的显示图标路径放入images变量中
    var images=['./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 相关文章推荐
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
You might like
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
Javascript 布尔型分析
2008/12/22 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python中如何获取类属性的列表
2016/12/26 Python
详解Python核心对象类型字符串
2018/02/11 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
一名女生的自荐信
2013/12/08 职场文书
《雨点》教学反思
2014/02/12 职场文书
安全责任书范本
2014/04/15 职场文书
质量主管工作职责
2014/09/26 职场文书
小学元宵节活动总结
2015/02/06 职场文书
python Polars库的使用简介
2021/04/21 Python
解决pytorch-gpu 安装失败的记录
2021/05/24 Python