recherche

Maison  >  Article  >  interface Web  >  jQuery implémente l'affichage des icônes et masque la commutation

jQuery implémente l'affichage des icônes et masque la commutation

php中世界最好的语言
php中世界最好的语言original
2018-04-19 14:13:222560parcourir

Cette fois, je vais vous présenter jQuery pour implémenter l'affichage des icônes et masquer la commutation. Quelles sont les précautions pour que jQuery implémente l'affichage des icônes et masquer la commutation. Voici un cas pratique, jetons un coup d'œil.

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 le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Étapes détaillées du fonctionnement de l'accordéon à panneau pliable avec jQuery EasyUI

Comment jQuery EasyUI exploite les onglets du panneau à onglets

liste d'actions jQuery des soldats pour y ajouter dynamiquement de nouveaux éléments

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes de la case à cocher de l'opération jQueryArticle suivant：Explication détaillée des étapes de la case à cocher de l'opération jQuery

Articles Liés

Voir plus