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

 更新时间:2014年06月06日 09:20:06   转载 作者:  
单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色,示例如下,需要的朋友可以参考下
说明:

单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
复制代码 代码如下:

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

相关文章

最新评论