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


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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
一个改进的UBB类
2006/10/09 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
htm调用JS代码
2007/03/15 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
js Date概念详细介绍
2013/11/22 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python中的延迟绑定原理详解
2019/10/11 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python 装饰器的使用示例
2020/10/10 Python
python Timer 类使用介绍
2020/12/28 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
护理心得体会范文
2016/01/22 职场文书