單擊某一段文字改寫文本顏色

2019-11-20 14:48:44

字體：大中小

來源：轉載

供稿：網友

說明：

單擊某一段文字，改文字變為紅色，再次單擊之后，文字又變回黑色。

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

因為這是一個class交替變化的過程，所以可以使用toggleClass方法，若對應的class："red"存在的話，則移除之，如果不存在，則添加之

復制代碼代碼如下:

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