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

前端技术 2023/09/07 JavaScript
说明：

单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色。
复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/17724

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案