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


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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JS简单计算器实例
Jan 20 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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中使用XML
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python书单 不将就
2017/07/11 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python getpass实现密文实例详解
2019/09/24 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
《乞巧》教学反思
2014/02/27 职场文书
拓展训练激励口号
2014/06/17 职场文书
售后客服个人自我评价
2014/09/14 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
民事答辩状范本
2015/05/21 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
七年级语文教学反思
2016/03/03 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers