菜单点击切换效果

admin

html代码：

1. <ul class="side-menu">
   
2.                                 <li class="active"><i class="glyphicon glyphicon-cog"></i><span>店铺管理</span></li>
   
3.                                 <li><i class="glyphicon glyphicon-cog"></i><span>订单管理</span></li>
   
4.                                 <li><i class="glyphicon glyphicon-cog"></i><span>员工管理</span></li>
   
5.                                 <li><i class="glyphicon glyphicon-cog"></i><span>商家管理</span></li>
   
6.                                 <li><i class="glyphicon glyphicon-cog"></i><span>师傅管理</span></li>
   
7.                                 <li><i class="glyphicon glyphicon-cog"></i><span>店铺管理</span></li>
   
8.                                 <li><i class="glyphicon glyphicon-cog"></i><span>订单管理</span></li>
   
9.                                 <li><i class="glyphicon glyphicon-cog"></i><span>员工管理</span></li>
   
10.                                 <li><i class="glyphicon glyphicon-cog"></i><span>商家管理</span></li>
    
11.                                 <li><i class="glyphicon glyphicon-cog"></i><span>师傅管理</span></li>
    
12.                         </ul>

复制代码

js代码：

1. <script>
   
2.         $(document).ready(function(){
   
3.                 $('ul.side-menu').children().click(function(){
   
4.                         $('ul.side-menu').children().css({'border-left':'none','background':'none'});
   
5.                         $(this).css({'border-left':'5px solid #E7E3E3','background':'#fb8e01'});
   
6.                 });
   
7.         });
   
8. </script>

复制代码

需要引入bootcss和jquery