설명 :
텍스트 단락을 클릭하고 텍스트를 빨간색으로 변경하십시오. 다시 클릭하면 텍스트가 검은 색으로 돌아갑니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> jQuery test </title>
<script src = "jquery-1.11.1.min.js"> </script>
<스타일 유형 = "텍스트/CSS">
.빨간색
{
색상 : 빨간색;
}
</스타일>
</head>
<body>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<script type = "text/javaScript">
$ ( "P"). 클릭 (function () {
if ($ (this) .hasclass ( "red")) {//이 클래스가 있는지 판단합니다
$ (this) .removeClass ( "빨간색");
}또 다른{
$ (this) .addclass ( "빨간색");
}
})
</스크립트>
</body>
</html>
이것은 클래스를 교대하는 과정이므로 ToggleClass 메소드를 사용할 수 있습니다. 해당 클래스 : "빨간색"이 존재하면 제거됩니다. 존재하지 않으면 추가됩니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> jQuery test </title>
<script src = "jquery-1.11.1.min.js"> </script>
<스타일 유형 = "텍스트/CSS">
.빨간색
{
색상 : 빨간색;
}
</스타일>
</head>
<body>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<p> 학습은 현재와의 항해와 같습니다. 전진하지 않으면 후퇴합니다 </p>
<script type = "text/javaScript">
$ ( "P"). 클릭 (function () {
$ (this) .toggleClass ( "빨간색");
})
</스크립트>
</body>
</html>