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


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 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
javascript表格的渲染组件
Jul 03 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 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
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
初学Javascript的一些总结
2008/11/03 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python切片用法实例教程
2014/09/08 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
基于python socketserver框架全面解析
2017/09/21 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python3访问字典里的值实例方法
2020/11/18 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
基层党组织公开承诺书
2014/03/28 职场文书
施工安全责任书
2014/04/14 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
工程合作意向书范本
2015/05/09 职场文书
师德培训心得体会2016
2016/01/09 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python