单击某一段文字改写文本颜色
单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色。
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>jquerytest</title> <scriptsrc="jquery-1.11.1.min.js"></script> <styletype="text/css"> .red { color:red; } </style> </head> <body> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <scripttype="text/javascript"> $("p").click(function(){ if($(this).hasClass("red")){//判断是否具有该class $(this).removeClass("red"); }else{ $(this).addClass("red"); } }) </script> </body> </html>
因为这是一个class交替变化的过程,所以可以使用toggleClass方法,若对应的class:"red"存在的话,则移除之,如果不存在,则添加之
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>jquerytest</title> <scriptsrc="jquery-1.11.1.min.js"></script> <styletype="text/css"> .red { color:red; } </style> </head> <body> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <p>学如逆水行舟,不进则退</p> <scripttype="text/javascript"> $("p").click(function(){ $(this).toggleClass("red"); }) </script> </body> </html>