Detailed example of how jQuery implements the function of switching between hiding and displaying and switching icons at the same time-JS Tutorial-php.cn

Detailed example of how jQuery implements the function of switching between hiding and displaying and switching icons at the same time

小云云

Release： 2017-12-26 14:48:29

Original

1669 people have browsed it

This article mainly introduces jQuery's 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>

Copy after login

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);
  });  
});

Copy after login

Related recommendations:

Detailed example of jQuery disabling form username and password autofill function

Comprehensive summary of related methods based on ajax in jQuery

Detailed explanation of jQuery's ability to dynamically add nodes and traverse nodes

The above is the detailed content of Detailed example of how jQuery implements the function of switching between hiding and displaying and switching icons at the same time. For more information, please follow other related articles on the PHP Chinese website!