Подсветка активных кнопок в HTML

Question

Подсветка активных кнопок в HTML

0

У меня вопрос о новичках в отношении HTML и стилизации. В настоящее время мой код HTML/JS работает так, что нажатая "кнопка" сохраняет определенный цвет (голубой), поэтому пользователь знает, какая страница отображается:

Тем не менее, он кажется неуклюжим, потому что я помещаю логику (хотя и логику UI) в элемент DOM. Я новичок в стиле UI, чтобы не знать, правильно ли это. Так ли это должно быть сделано? Это моя реализация:

CSS:

.navBar a:hover {
        background: #F0F5F5;
    }

.navBar a.active {
        background: #D6EBFF;
    }

HTML:

<div class="navBar" style="display:inline; float:right; margin-top:30px; margin-right:30px">
  <ul>
    <li><a ng-class="{'active' : activePage === 'main'}" ng-click="activePage = 'main'" href="#/main">Main</a></li>
    <li><a ng-class="{'active' : activePage === 'recipes'}" ng-click="activePage = 'recipes'" href="#/recipes">Recipes</a></li>
  </ul>
</div>

При нажатии ссылки строковый литерал устанавливается, а затем класс CSS используется на основе этого строкового литерала. Я чувствую, что переусердствовал.

Bob Horn 30 июнь 2015, в 22:41

Источник

Теги:

javascript

html

angularjs

css

2 ответа

1

Имейте массив $rootScope.links, каждый элемент которого является объектом различных страниц вашего сайта. Таким образом:

[{name: 'Home', URL: 'home', order: 1}, {name: 'Recipes', URL: 'recipes', order: 2}, ...]

HTML:

<ul>
    <li ng-repeat="link in links | orderBy:order" ng-class={{'active': activePath === link.path}}>
        <a ng-href="#!/{{link.path}}">{{link.name}}</a>
    </li>
</ul>

В вашем скрипте:

.run(function ($location, $rootScope) {
    $rootScope.activePath = '';

    $rootScope.$on('$routeChangeSuccess', function () {
        var pathArray = $location.path().split('/');

        $rootScope.activePath = pathArray[1];
    });
});

Kabir Roy 30 июнь 2015, в 17:51

Ещё вопросы

Jonathan Crowe · Accepted Answer · 2015-06-30T17-54-00.000Z

Я сделал это, используя следующий метод:

Заголовок файла:

<a href="#/home" data-ng-class="{ active : activeController == 'HomeCtrl' }">Home</a>

App.js

app.run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(ev,data) {

        if (data.$$route && data.$$route.controller) {
            $rootScope.activeController = data.$$route.controller;
        }
    });
});

Это создаст переменную activeController в корневой области при каждом изменении маршрута, а затем использует эту переменную для установки active класса

Приятно! Я просто сделал это, и это сработало. И это исправило еще одну проблему: кнопка Main подсвечивается при запуске приложения. Раньше этого не происходило, пока вы не нажали на него.