Maison > Article > interface Web > jQuery clique pour changer de classe et basculer et définir la méthode toggleClass() usage_jquery

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

WBOYoriginal: 2016-05-16 15:26:251492parcourir

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>

Méthode jQuery toggleClass()

Exemple

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

$("button").click(function(){
$("p").toggleClass("main");
});

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)

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 de la création d'objets basés sur JavaScript orienté objetArticle suivant：Explication détaillée de la création d'objets basés sur JavaScript orienté objet

Articles Liés

Voir plus