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


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 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
继续学习javascript闭包
Dec 03 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
vue-iview动态新增和删除的方法
Jun 17 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python创建进程fork用法
2015/06/04 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python的logging模块基本用法
2020/12/24 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
安全检查管理制度
2014/02/02 职场文书
车位出租协议书范本
2016/03/19 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers