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


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匿名函数的一种应用 代码封装
Jun 27 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
js array数组对象操作方法汇总
Mar 18 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Destoon实现多表查询示例
2014/08/21 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Augularjs-起步详解
2016/07/08 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python学习之os模块及用法
2020/06/03 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python文件路径操作方法总结
2020/12/21 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js