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


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之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
JavaScript中的this妙用实例分析
May 09 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读取RSS feed的代码
2008/08/01 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
小程序转发探索示例
2019/02/19 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏