关于jQuery的增减类的操作(附代码)
程序员文章站
2022-05-20 19:09:38
...
这篇文章主要介绍了关于jQuery的增减类的操作(附代码),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
<!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>
相关推荐:
以上就是关于jQuery的增减类的操作(附代码)的详细内容,更多请关注其它相关文章!