jQuery中如何点击添加样式,然后在空白处点击再移除样式?下面来写一个点击文字元素添加颜色,然后点击网页空白处颜色消失实例。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>科e互联-web前端学习教程</title> <script language="javascript" type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script> <script> $(document).ready(function(){ $('.test ul li').click(function(){ $(this).addClass('click'); }); $('html').mousedown(function(){ $('.test ul li').removeClass('click'); }); }); </script> <style> ul,li { list-style:none; } .test ul li { float:left; display:block; width:100px; height:100px; line-height:100px; margin-right:20px; border:1px dotted #eee; text-align:center; } .test ul li:hover { background:#eee; } .test ul li.click { background:#333; } </style> </head> <body> <div class="test"> <ul> <li>File Name A</li> <li>File Name B</li> <li>File Name C</li> <li>File Name D</li> <li>File Name E</li> <li>File Name F</li> </ul> </div> </body> </html>