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


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学习笔记(十)
Jan 17 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
create-react-app中添加less支持的实现
Nov 15 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
js form action动态修改方法
2008/11/04 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
20岁生日感言
2014/01/13 职场文书
同居协议书范本
2014/04/23 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
公司委托书格式范文
2014/10/09 职场文书
部门2014年度工作总结
2014/11/12 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书