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

Posted 2023-03-13

【中文标题】单击后按钮更改颜色 - 焦点无法正常工作

【英文标题】：button change color after click - focus not working good

【发布时间】：2018-07-20 00:04:17

【问题描述】：

我想在导航面板中制作按钮，在选择页面后，该按钮将呈现不同的颜色，如果我单击下一页返回旧颜色。我使用来自 angulara 的材料设计。我正在尝试通过以下方式在 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>

【问题讨论】：

我认为您应该为此使用 javascript。当按钮被单击或聚焦时，将active 类附加到它，失去焦点时，删除active 类。

您应该尝试使用 routerLinkActive="active" 属性，该属性会在您的元素上添加一个活动类

【参考方案1】：

尝试在 Angular 5 中使用此代码

这是小提琴：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>

【讨论】：

当我将函数放入我的打字稿时，它仍然无法正常工作

哥们，你离 angularjs 太远了