Angularjs the left navigation bar, click on the color

Angularjs the left navigation bar, click on the color

EDITORIAL

Recently doing a small project, but what are the requirements perfectly formed page, standard page - navigation bar. After asked to do click on the left navigation bar, click on the elements of a color change, or point users do not know which one. Do not know what a brain is too serious, selection angularjs write the front end of the project. [Parties: Anyway, that regret]

Native JS achieve this is very simple, when only need to click elements to add style to the current element, remove the same elements of other styles.

To check what angularjs, we found angularjs simple to implement more efficient

Without further ado

Html a look at the code, I added in ng-click inside the element = "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>
                

Next, look js code
Here Insert Picture Description
and then the css code, because after clicking the dearest friends you want to add color selection
Here Insert Picture Description

Ends well

With angularjs did not expect so simple to get.
Here Insert Picture Description

Published 17 original articles · won praise 15 · views 1370

Guess you like

Origin blog.csdn.net/wuyou1995/article/details/103600062