富贵资源网 Design By www.hznty.com
说明:
单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js"><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="/UploadFiles/2021-04-02/jquery-1.11.1.min.js"><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>
单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js"><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="/UploadFiles/2021-04-02/jquery-1.11.1.min.js"><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>
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...