說明: 
單擊某一段文字,改文字變為紅色,再次單擊之后,文字又變回黑色。 
復制代碼 代碼如下:
 
<!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"> 
.red 
{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<script type="text/javascript"> 
$("p").click(function(){ 
if($(this).hasClass("red")){ //判斷是否具有該class 
$(this).removeClass("red"); 
}else{ 
$(this).addClass("red"); 
} 
}) 
</script> 
</body> 
</html> 
復制代碼 代碼如下:
 
<!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"> 
.red 
{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<p>學如逆水行舟,不進則退</p> 
<script type="text/javascript"> 
$("p").click(function(){ 
$(this).toggleClass("red"); 
}) 
</script> 
</body> 
</html> 
新聞熱點
疑難解答
圖片精選