锚标记禁用颜色属性不起作用？

Posted 2023-03-06

【中文标题】锚标记禁用颜色属性不起作用？

【英文标题】：Anchor tag disabled color attribute not working?

【发布时间】：2021-04-25 21:06:20

【问题描述】：

我使用组件禁用了锚标记，需要将灰色显示为禁用链接，但这里链接被禁用，而不是变成灰色。所以用户无法找到它是否被禁用。你能帮帮我吗？

html：

   <li class="nav-item" [class.disabled]="profile_flag">
       <a class="nav-link routeProfileStatus" style="cursor: pointer;" tabindex=" 
            profile_flag?-1:0" (click)="gotoProfile()">My Profile</a>
   </li>
    <li class="nav-item" [class.disabled]="waitingRoom_flag">
        <a class="nav-link routeStatus"  style="cursor: pointer;" tabindex=" 
             waitingRoom_flag?-1:0" (click)="gotoDashboard()">Waiting Room</a>
     </li>

组件：

 profile_flag : boolean = false;
  waitingRoom_flag : boolean = false;

css:

.disabled
    color:grey;
    text-decoration:none;
    cursor:default;
    pointer-events:none;

【问题讨论】：

您需要将类应用于链接而不是列表项

【参考方案1】：

您的.disabled 类已添加到li 标记，但您需要将该规则应用于li 内的a ，

因此，请改用.disabled > a 作为该 CSS 规则的选择器。

【参考方案2】：

从li 中删除[class.disabled] 并在a 上使用ngClass

<a class="nav-link routeStatus" [ngClass]=" 'disabled' : waitingRoom_flag" style="cursor: pointer;" tabindex="waitingRoom_flag?-1:0" (click)="gotoDashboard()">Waiting Room</a>

【参考方案3】：

你需要在a标签中使用disabled类而不是li标签