jQuery-Methode zum Hinzufügen und Löschen angegebener tags

jQuery-Methode zum Hinzufügen und Löschen angegebener tags_jquery

WBOY

Freigeben： 2016-05-16 15:25:27

Original

1707 Leute haben es durchsucht

So fügt jQuery einen Stil für ein bestimmtes Tag hinzu und entfernt ihn:
Bei der tatsächlichen Anwendung von Webseiten muss der CSS-Stil von Elementen entsprechend unterschiedlichen Bedingungen geändert werden. Diese Funktion kann durch dynamisches Hinzufügen und Löschen einer CSS-Klasse zum Element erreicht werden. Das Folgende ist ein Beispiel für die Implementierung dieser Funktion .
1. Verwenden Sie addClass() und removeClass(), um eine CSS-Klasse hinzuzufügen und zu entfernen:
Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#add").click(function () {
 $("div").addClass("mytest");
 });
 $("#del").click(function () {
 $("div").removeClass("mytest");
 })
})
</script>
<body>
<div>珍惜当前，因为只有当前才是实实在在的</div>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>

Nach dem Login kopieren

Der obige Code kann bestimmte Stile hinzufügen und löschen. Das obige ist nur eine Demonstration und kann je nach spezifischen Anforderungen hinzugefügt oder gelöscht werden.
2. Verwenden Sie toggleClass(), um zwischen dem Hinzufügen und Löschen von Stilklassen zu wechseln:
Wenn das übereinstimmende Objekt die angegebene Stilklasse hat, kann toggleClass() die angegebene Klasse löschen. Wenn nicht, wird die angegebene Klasse hinzugefügt. Die Codestärke ist wie folgt:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#switch").click(function () {
 $("div").toggleClass("mytest");
 });
})
</script>
<body>
<div class="mytest">珍惜当前，因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

Nach dem Login kopieren

Der obige Code kann verwendet werden, um zwischen dem Löschen und Hinzufügen bestimmter Stilklassen zu wechseln. Ich hoffe, dass Sie dies selbst tun können und der Ertrag möglicherweise größer ist.