单击改写文本颜色

说明:

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

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



posted @ 2014-06-06 00:00  千手宇智波  阅读(284)  评论(0编辑  收藏  举报