suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery klickt, um die Klasse zu ändern und die Methodendefinition „usage_jquery“ um- und umzuschalten

jQuery klickt, um die Klasse zu ändern und die Methodendefinition „usage_jquery“ um- und umzuschalten

WBOY
WBOYOriginal
2016-05-16 15:26:251522Durchsuche

Ich bin im alten Stil, also werde ich ohne weitere Umschweife den Code posten. 

<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>

jQuery toggleClass()-Methode

Beispiel

Schalten Sie die „Hauptklasse“ um, die alle e388a4556c0f65e1904146cc1a846bee-Elemente hinzufügt und entfernt: 

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

Definition und Verwendung

Die toggleClass()-Methode wechselt zwischen dem Hinzufügen und Entfernen einer oder mehrerer Klassen des ausgewählten Elements.

Diese Methode überprüft die angegebene Klasse in jedem Element. Fügt die Klasse hinzu, wenn sie nicht vorhanden ist, oder entfernt sie, wenn sie festgelegt ist. Dies wird als Toggle-Effekt bezeichnet.

Mit dem Parameter „switch“ können Sie jedoch festlegen, dass nur Klassen entfernt oder nur hinzugefügt werden.

Grammatik

$(selector).toggleClass(classname,function(index,currentclass),switch)
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Erstellung von Objekten basierend auf objektorientiertem JavaScriptNächster Artikel：Detaillierte Erläuterung der Erstellung von Objekten basierend auf objektorientiertem JavaScript

In Verbindung stehende Artikel

Mehr sehen