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实现动态删除LI的方法
May 30 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 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
德生S2000电路分析
2021/03/02 无线电
php cookis创建实现代码
2009/03/16 PHP
yii操作session实例简介
2014/07/31 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python如何设置静态变量
2020/09/07 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
公司员工的自我评价范例
2013/11/01 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
文明风采获奖感言
2014/02/18 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
母亲节感言
2015/08/03 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python