jQuery实现切换隐藏与显示同时切换图标功能
更新时间：2017年10月29日 10:57:43 作者：Double Two
这篇文章主要介绍了jQuery实现切换隐藏与显示同时切换图标功能,需要的朋友可以参考下
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仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本文2017-01-01
节点的移动在应用中比较常见，如何动态移动某一节点来实现某一特殊效果，下面有个不错的示例，希望对大家有所帮助2014-01-01
使用jQuery给Table动态增加行、清空table的方法
这篇文章主要介绍了使用jQuery给Table动态增加行、清空table的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细绍了省市区三级联动jquery实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了jQuery实现模拟flash头像裁切上传功能,结合实例形式分析了jQuery图像剪切与文件传输相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了jQuery实现滑动开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts实现的2D对数饼图效果,结合实例形式分析了jQuery图形插件HighCharts绘制2D对数饼图的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Jquery简单分页实现方法,实例分析了jquery分页的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
jquery mobile动态添加元素之后不能正确渲染解决方法说明
本篇文章主要是对jquery mobile动态添加元素之后不能正确渲染解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
这篇文章主要介绍了jQuery实现带3D切割效果的轮播图功能,结合实例形式分析了jQuery轮播图相关的界面布局、3D效果实现与事件响应等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2019-04-04
最新评论