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


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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
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编程中八种常见的文件操作方式
2006/11/19 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
koa2的中间件功能及应用示例
2020/03/05 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
关于python中的xpath解析定位
2020/03/06 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
鉴史问廉观后感
2015/06/10 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis