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


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的逻辑运算符 ||
May 31 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
初识Javascript小结
Jul 16 Javascript
JavaScript构造函数详解
Dec 27 Javascript
学习vue.js计算属性
Dec 03 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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+mysql扎实个人基本功
2008/03/27 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JS实现div居中示例
2014/04/17 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
React组件的三种写法总结
2017/01/12 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
详解如何运行vue项目
2019/04/15 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
numpy自动生成数组详解
2017/12/15 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
迎接领导欢迎词
2014/01/11 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书