search

Home >Web Front-end >JS Tutorial >Detailed explanation of the function of switching icons simultaneously with jQuery

Detailed explanation of the function of switching icons simultaneously with jQuery

小云云
小云云Original
2018-05-14 16:02:372274browse

This article mainly introduces jQuery to realize the function of switching between hiding and displaying and switching icons at the same time. Friends who need it can refer to it. I hope it can help everyone.

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=[&#39;./images/01.jpg&#39;,&#39;./images/02.jpg&#39;];
//通过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);
  });  
});

Related recommendations:

How to use JS to switch Hide and display icons at the same time.

Two JS methods to implement adding small icons in Input

Detailed explanation of CSS to implement icon rotation when the mouse is moved up Effect method

Introduction to the method of displaying small icons in the browser title bar of HTML pages

jquery controls css absolute positioning position effects, such as mouse Move to the icon display layer to display relevant information


The above is the detailed content of Detailed explanation of the function of switching icons simultaneously with jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to deal with the blank display after vue is packagedNext article：How to deal with the blank display after vue is packaged

Related articles

See more