单击某一段文字改写文本颜色_技术学院_宜昌市隼壹珍商贸有限公司

您好,欢迎访问宜昌市隼壹珍商贸有限公司

400 890 5375
当前位置: 主页 > 新闻动态 > 技术学院

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

发布时间:2026-01-17  |  点击率:
说明:

单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
复制代码 代码如下:
<!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>

全国统一服务电话

400 890 5375

电子邮箱:879577@qq.com

公司地址:宜昌市西陵区黄河路5号三峡明珠10栋1051室

咨询微信

TEL:13680874598