今天写一个前端页面的小功能，选中某个按钮或者菜单的时候颜色发生变化，以便用户区分自己选中的选项，这也是一种前端日常工作之中优化项。
效果是这样的：
代码是这样的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> ul li{ line-height: 40px; list-style: none; float: left; padding-left: 20px; } .click{ width: 100px; height: 40px; display: block; text-align: center; background: #1CAF9A; color: #FFFFFF; } .noneclick { width: 100px; height: 40px; display: block; text-align: center; color: #000000; } </style> </head> <body> <ul id="menu"> <li><span class="noneclick">报警配置</span></li> <li><span class="noneclick">地图配置</span></li> <li><span class="noneclick">服务器配置</span></li> <li><span class="noneclick">图标配置</span></li> <li><span class="noneclick">岗位配置</span></li> </ul> <script> $('#menu li span').click(function () { var f = this; $('#menu li span').each(function () { this.className = this == f ? 'click' : 'noneclick' }); }); </script> </body> </html>
