<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .cls{ background-color:black; } </style> <script type="text/javascript"> $(function(){ /* $("#btn").click(function(){ if($("body").hasClass("cls")){ $("body").removeClass("cls"); $(this).val("关灯"); } else{ $("body").addClass("cls"); $(this).val("开灯"); } }); */ $("#btn").click(function(){ $("body").toggleClass("cls");//切换类样式 }) }); </script> </head> <body> <h1>网页开关灯效果</h1> <hr > <input type="button" name="" id="btn" value="开关灯" /> </body> </html>
运行效果:
Nearth===>WEB前端--第20课/JQuery/网页开关灯效果(hasClass,removeClass,addClass,toggleClass)
最新推荐文章于 2019-11-16 17:30:09 发布