单击某一段文字改写文本颜色

166 阅读 0 评论 110 点赞

我是靠谱客的博主自然魔镜，最近开发中收集的这篇文章主要介绍单击某一段文字改写文本颜色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

说明：

单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色。

复制代码代码如下:

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