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


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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
javascript 常用关键字列表集合
Dec 04 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 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学习笔记之面向对象
2014/11/08 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
jQuery实现本地存储
2020/12/22 jQuery
python命令行参数sys.argv使用示例
2014/01/28 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python实现AES加密和解密
2019/03/27 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python如何实现代码检查
2019/06/28 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python实现微信好友的数据分析
2019/12/16 Python
python默认参数调用方法解析
2020/02/09 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
促销活动方案模板
2014/02/24 职场文书
欢迎领导标语
2014/06/27 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Python+Appium自动化测试的实战
2021/06/30 Python