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没想到这么简单就搞定了。