html - 单击后按钮改变颜色 - 焦点无法正常工作

Question

我想在导航面板中制作按钮，在选择页面后，这些按钮将呈现不同的颜色，如果我单击下一页，则返回旧颜色。我使用 angulara 的 Material 设计。我正在尝试通过以下方式在 css 中更改颜色。单击后颜色会发生变化，但当您单击页面上的上下文时，颜色会恢复为旧颜色。

.btn {
  padding: 5px 20px  0px 20px;
  font-size: 16px;
  font-weight: 700;
}
.btn:hover {
   opacity: 1;
   transition: all 0.2s ease-out;
   color: rgb(255,100,100);
 }
.btn:focus{
      color: rgb(255,102,100);
    }
.btn:active {
  color: rgb(255,102,100);
}

<button mat-button class="mainPageButton btn" id="btnHousing" routerLink="/home">Strona Główna</button>

Answer 1

尝试在angular 5中使用这段代码

这是 fiddle :http://jsfiddle.net/gy2an/8/

//this app:
angular.module('myApp', ['autoActive']);

window.location.hash = '#/'; //All hash paths need to start with a /, it happens automaticaly with ngResource and the like...

//the module we are demonstrating:
(function () {
    angular.module('autoActive', [])
        .directive('autoActive', ['$location', function ($location) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element) {
                function setActive() {
                    var path = $location.path();
                    if (path) {
                        angular.forEach(element.find('li'), function (li) {
                            var anchor = li.querySelector('a');
                            if (anchor.href.match('#' + path + '(?=\\?|$)')) {
                                angular.element(li).addClass('active');
                            } else {
                                angular.element(li).removeClass('active');
                            }
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());

li.active {
    background-color: red;
}

<div ng-app="myApp">
    <div auto-active>
        <ul>
            <li><a href="#/?some=data">This link points to #/fun1</a>
            </li>
            <li><a href="#/fun2?some=data">This link points to #/fun2</a>
            </li>
            <li><a href="#/fun3">This link points to #/fun3</a>
            </li>
            <li><a href="#/fun4">This link points to #/fun4</a>
            </li>
            <li><a href="#/fun5?some=data">This link points to #/fun5</a>
            </li>
        </ul>
    </div>
</div>