手机
当前位置:查字典教程网 >编程开发 >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获取上传文件的名称的正则表达式

将HTML自动转为JS代码

JS实现两表格里数据来回转移的方法

javascript实现点击后变换按钮显示文字的方法

JavaScript实现点击文字切换登录窗口的方法

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

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

制作特殊字的脚本

JQuery实现动态添加删除评论的方法

精品推荐
分类导航