Maison > Article > interface Web > Exemple détaillé de la façon dont jQuery implémente la fonction de basculement entre le masquage et l'affichage et la commutation des icônes en même temps
Exemple détaillé de la façon dont jQuery implémente la fonction de basculement entre le masquage et l'affichage et la commutation des icônes en même temps
- 小云云original
- 2017-12-26 14:48:291608parcourir
Cet article présente principalement jQuery pour réaliser la fonction de basculement entre le masquage et l'affichage et le changement d'icône en même temps. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Code 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> <!--隐藏／显示 控制按钮--> <p><img id="ctr" scr="./images/01.jpg"></p> <!--被控制元素--> <p id="info" style="display:none;">这里是要显示或隐藏的内容</p> </body> </html>
Code 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);
});
});Recommandations associées ：
Résumé complet des méthodes associées basées sur ajax dans jQuery
Explication détaillée de jQuery pour ajouter dynamiquement des nœuds et parcourir des nœuds
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!