This time I will bring you jQuery to implement icon display and hide switching. What are the precautions for jQuery to implement icon display and hide switching. The following is a practical case, let’s take a look.
HTML code:
<!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> </head> <body> <!--隐藏／显示 控制按钮--> <p><img id="ctr" scr="./images/01.jpg"></p> <!--被控制元素--> <p id="info" style="display:none;">这里是要显示或隐藏的内容</p> </body> </html>
JS code:
$(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);
});
});I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jQuery EasyUI operates the folding panel accordion detailed steps
jQuery EasyUI How to operate the tab panel tabs
jQuery action list soldiers to dynamically add new elements to it
The above is the detailed content of jQuery implements icon display and hide switching. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
