Maison > Article > interface Web > Comment utiliser JS pour basculer entre masquer et afficher les icônes en même temps
Ce que je vous apporte cette fois, c'est comment utiliser JS pour basculer entre masquer et afficher les icônes en même temps. Cet article vous donnera une bonne analyse.
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); }); });
Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez payer. attention aux autres sites Web chinois php Articles connexes !
Lecture connexe :
Comment ajax peut-il lire le json local
Comment utiliser vue pour implémenter la vérification de connexion
Utilisez jQuery pour dédupliquer et trier les tableaux
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!