Angularjs 左侧导航栏点击变色

Angularjs 左侧导航栏点击变色

写在前面

最近在做一个很小的项目，但是页面啥的都要求五脏俱全，页面标配–导航栏。要求做到点击左侧导航栏后，点击的元素变个色，不然用户自己不知道点了哪一个。也不知道当初脑子是想啥，选择用angularjs写整个项目的前端。【当事人:反正就是后悔】

原生的JS 实现这种很简单，只需要点击元素时，给当前元素添加样式即可，移除其他元素相同的样式。

查来一下angularjs ，发现angularjs 实现起来更为高效简单

废话少说

先看一html下代码,我在元素里面加了个ng-click=“li_click(11)” ng-class="{focus:state==11}"

<li class="first-item" ng-click="wifi(1)">
                    <img class="menu-item-pic" src="res/wifi.png">
                    <a>WiFi</a>
                </li>
                <li class="menu-item submenu" ng-click="li_click(10)" ng-show="show1" ng-class="{focus:state==10}">
                    <a style="font-size: 15px;padding-left: 1px;padding-right: 1px;padding-bottom: 3px;padding-top: 3px;color: black" ui-sref="wifilist">设备识别</a>
                </li>
                

接下来看js的代码

然后是css的代码，因为在点击之后要添加选择变色的仰首

圆满收场

用angularjs没想到这么简单就搞定了。