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


Posted in Javascript onJune 06, 2014

说明:

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

<!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>
Javascript 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue中nextTick用法实例
Sep 11 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 #Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
jQuery插件开发详细教程
Jun 06 #Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
You might like
php实现jQuery扩展函数
2009/10/30 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python中join()方法介绍
2018/10/11 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python assert关键字原理及实例解析
2019/12/13 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
会计自我鉴定
2014/02/04 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
应急管理工作总结2015
2015/05/04 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫