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


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 03 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
使用JavaScript破解web
Sep 28 Javascript
了解JavaScript中let语句
May 30 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 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实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
python实现简单购物商城
2016/05/21 Python
Python3 Random模块代码详解
2017/12/04 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python递归实现打印多重列表代码
2020/02/27 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
成龙霸王洗发水广告词
2014/03/14 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
美国留学经济担保书
2014/05/20 职场文书
法学专业求职信
2014/07/15 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
Python制作表白爱心合集
2022/01/22 Python