单击某一段文字改写文本颜色
更新时间：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>
单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色。
复制代码 代码如下:
<!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>
相关文章
这篇文章主要介绍了canvas实现手机端用来上传用户头像的代码代码简单易懂非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-10-10
这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了js实现2015年新年倒计时效果，很快就要迎接新的一年，想知道距离2016还有多少天吗？大家可以参考一下这篇文章2015-12-12
2008-01-01
通过JS的事件循环机制,可以更清楚JS代码的执行流,下面这篇文章主要给大家介绍了关于如何通过一篇文章让你搞清楚JavaScript事件循环的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。2009-03-03
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了方便小编直接使用了可清除的input自定义组件，下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件，感兴趣的朋友一起看看吧2018-07-07
这篇文章主要介绍了使用百度地图api实现根据地址查询经纬度的方法，附上实例，推荐给有需要的小伙伴们。2014-12-12
下面小编就为大家带来一篇响应式表格之固定表头的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论