简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée de la fonction de changement d'icône simultanément avec jQuery

Explication détaillée de la fonction de changement d'icône simultanément avec jQuery

小云云
小云云original
2018-05-14 16:02:372235parcourir

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=[&#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);
  });  
});

Recommandations associées :

Comment utiliser JS pour basculer entre masquer et afficher et changer d'icône en même temps

Deux méthodes JS pour implémenter l'ajout de petites icônes dans Input

Explication détaillée de l'implémentation CSS de la souris sur Comment transférer l'effet de rotation des icônes

Introduction à la façon d'afficher de petites icônes dans la barre de titre du navigateur des pages Web HTML

jquery contrôle les effets de positionnement absolu CSS, tels que déplacer la souris vers le calque d'affichage des icônes pour afficher les informations pertinentes


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：Comment gérer l'affichage vide une fois la vue emballéeArticle suivant：Comment gérer l'affichage vide une fois la vue emballée

Articles Liés

Voir plus