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


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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
JavaScript作用域链示例分享
May 27 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
cypress测试本地web应用
Jun 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
Python 中的 else详解
2016/04/23 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python pandas库的安装和创建
2019/01/10 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
中学生演讲稿
2014/04/26 职场文书
教师节倡议书
2014/08/30 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android