手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >单击某一段文字改写文本颜色
单击某一段文字改写文本颜色
摘要:说明:单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。复制代码代码如下:jquerytest.red{color: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(){

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>

【单击某一段文字改写文本颜色】相关文章:

jQuery获取页面元素绝对与相对位置的方法

jQuery实现不断闪烁文字的方法

百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换

showModelessDialog()使用详解

JavaScript中Number.MAX_VALUE属性的使用方法

javascript实现图片跟随鼠标移动效果的方法

JQuery分屏指示器图片轮换效果实例

JavaScript判断数组是否包含指定元素的方法

新闻一段时间向上滚动效果

连接文字不停变色

精品推荐
分类导航