Home >Web Front-end >JS Tutorial >About the operation of adding and subtracting classes in jQuery (with code)
This article mainly introduces the operations of adding and subtracting classes in jQuery (with code). It has a certain reference value. Now I share it with you. Friends in need can refer to it
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0;margin: 0;} ul{ list-style: none; } ul li{ width: 100px; height: 40px; line-height: 40px; text-align: center; background: #87CEEB; float: left; } ul li.active{ background: #00FF00; } </style> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> </body> <script type="text/javascript"> //用mouseover方法 $("ul li").mouseover(function(){ $(this).addClass("active"); }).mouseout(function(){ $(this).removeClass("active"); }) //结合选择器选择 $("ul li").mouseover(function(){ $(this).addClass("active").siblings("li").removeClass("active"); }) </script> </html>
Related recommendations:
How to use jQuery to implement increment and decrement of input values
The above is the detailed content of About the operation of adding and subtracting classes in jQuery (with code). For more information, please follow other related articles on the PHP Chinese website!