本文重点解决jquey常用选择器基础语法学习问题,希望能够帮助到你
实现代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一步实现多个同级div,只改变点击的当前div样式</title> </head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <div id="little_light"> <div class="light_greycolor">首页</div> <div>珠江0度</div> <div>百威陪酒</div> <div>美味烧烤</div> <div>烧汁鸡扒</div> <div>扬州炒饭</div> <div>就知道吃</div> </div> </body> <style> .light_greycolor { background-color:#FF8400; } #little_light>div{ /*width: 140px;*/ padding:3px 10px; height: 30px; border:1px solid red; float:left; margin-right:30px; } </style> <script> $(function(){ $("#little_light div").click(function(){ $(this).siblings('div').removeClass('light_greycolor'); // 删除其他兄弟元素的样式//jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。 $(this).addClass('light_greycolor'); }); }); </script> </html>
本网刊登的文章均仅代表作者个人观点,并不代表本网立场。文中的论述和观点,敬请读者注意判断。