communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

jQuery clique pour changer de classe et basculer et définir la méthode toggleClass() usage_jquery

WBOY
Libérer： 2016-05-16 15:26:25
original
1523 Les gens l'ont consulté

Je suis dans l'ancien style, donc sans plus tarder, je posterai le code. 

<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
  background-image:url(images/21.jpg);
  background-repeat:no-repeat;
  color:#0CF;
}
.bg2 {
  background-image:url(images/22.jpg);
  background-repeat:no-repeat;
  color:#F00;
}
</style>
<script type="text/javascript">
//参数para1：希望隐藏元素的id值
function toggle1(para1){
  if ($("#p2").attr("class")=="bg1")
  {
    $("#p2").attr("class","bg2");
  }
  else 
  {
    $("#p2").attr("class","bg1");
  }
  $("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此处将显示或隐藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等）</p>
</body>
</html>
Copier après la connexion

Méthode jQuery toggleClass()

Exemple

Basculez la classe "principale" qui ajoute et supprime tous les éléments 

$("button").click(function(){
$("p").toggleClass("main");
});
Copier après la connexion
Définition et usage

La méthode toggleClass() bascule entre l'ajout et la suppression d'une ou plusieurs classes de l'élément sélectionné.

Cette méthode vérifie la classe spécifiée dans chaque élément. Ajoute la classe si elle n'existe pas ou la supprime si elle est définie. C'est ce qu'on appelle un effet bascule.

Cependant, en utilisant le paramètre "switch", vous pouvez spécifier que seules les classes soient supprimées ou uniquement ajoutées.

Grammaire

$(selector).toggleClass(classname,function(index,currentclass),switch)
Copier après la connexion
Étiquettes associées：
jquery点击改变class jquery_toggleclass jquery改变class jquery_togg
source：php.cn
Article précédent：Explication détaillée de la création d'objets basés sur JavaScript orienté objet Article suivant：Trois façons pour SpringMVC de renvoyer les compétences json data_javascript
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...
Depuis 2024-04-06 16:54:10
0
1
410
Le feu transitionnel de l'enfant intérieur Il s’agit d’un exemple minimal reproductible. L'extrémité de transition du survol "ba...
Depuis 2024-04-02 14:38:29
0
1
262
Impossible d'appliquer le filtre CSS au survol dans Safari J'ai remarqué que la modification de la propriété de filtre au survol provoque un comporte...
Depuis 2024-04-01 08:19:51
0
1
387
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal