ภาพประกอบ:
คลิกย่อหน้าของข้อความและเปลี่ยนข้อความเป็นสีแดง หลังจากคลิกอีกครั้งข้อความจะเปลี่ยนเป็นสีดำ
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> jQuery Test </title>
<script src = "jQuery-1.11.1.min.js"> </script>
<style type = "text/css">
.สีแดง
-
สี: สีแดง;
-
</style>
</head>
<body>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<script type = "text/javascript">
$ ("P") คลิก (ฟังก์ชัน () {
if ($ (นี่) .hasclass ("red")) {// ตัดสินว่ามีคลาสนี้
$ (นี่) .removeclass ("สีแดง");
}อื่น{
$ (นี่) .addclass ("สีแดง");
-
-
</script>
</body>
</html>
เนื่องจากนี่เป็นกระบวนการของคลาสสลับคุณสามารถใช้วิธี Toggleclass หากคลาสที่สอดคล้องกัน: "สีแดง" มีอยู่มันจะถูกลบออก หากไม่มีอยู่จะมีการเพิ่ม
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> jQuery Test </title>
<script src = "jQuery-1.11.1.min.js"> </script>
<style type = "text/css">
.สีแดง
-
สี: สีแดง;
-
</style>
</head>
<body>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<p> การเรียนรู้ก็เหมือนกับการแล่นเรือไปตามปัจจุบันหากคุณไม่ก้าวไปข้างหน้าคุณจะถอย </p>
<script type = "text/javascript">
$ ("P") คลิก (ฟังก์ชัน () {
$ (นี่) .toggleclass ("สีแดง");
-
</script>
</body>
</html>