单击改写文本颜色
说明:
单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
<!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>