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


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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jquery uaMatch源代码
Feb 14 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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 shell命令合并图片的代码
2011/06/23 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
python计算文本文件行数的方法
2015/07/06 Python
Python如何发布程序的详细教程
2018/10/09 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python实现贪吃蛇双人大战
2020/04/18 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
读书活动总结
2014/04/28 职场文书
学习型党组织心得体会
2014/09/12 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
PHP实现两种排课方式
2021/06/26 PHP