Angular/Typescript-单击链接时更改跨度的背景色 [英] Angular/Typescript - Change background color of a span when a link is clicked

问题描述

单击链接以指示已选中时，我正在尝试更改跨度的颜色.这必须以单选按钮的形式起作用，这意味着如果单击(选中)另一个链接，则颜色必须消失.我仅使用html和css尝试了各种方法，但是不幸的是，我从未设法通过:focus使它起作用.目前，当我单击其中一个过滤器时，没有任何迹象表明类别之一已被激活，从而严重影响了UX.我相信可以在angular中使用ngClass来实现，但是，我真的很难理解它是如何工作的.任何帮助将不胜感激.

I'm trying to change the color of a span when a link is clicked in order to indicate that it's checked. This must work in the form of a radio button, meaning that the color must disappear if another link is clicked (checked). I tried various methods using only html and css, but unfortunately I never managed to get it to work using :focus. At the moment, when I click on one of the filters there is no indication that one of the categories has been activated, heavily impacting the UX. I believe that this can be achieved using ngClass in angular, however, I'm really struggling to understand how this works. Any help would be really appreciated.

HTML:

<div class="checklist categories">
    <ul>
        <li><a data-action="filter-link" (click)="changeCategory(null)"><span></span>All</a></li>
        <li><a data-action="filter-link" (click)="changeCategory('House Favourites')"><span></span>House Favourites</a></li>
      </ul>
  </div>   

跨度的样式会形成一个小复选框.

The styling of the span forms a small checkbox.

推荐答案

您可以使用ngClass 演示

u can use ngClass Demo

在CSS中创建您的类并写下您想要的CSS

in css create your class and write which css you want

.active-link span{background-color:green;}

在html中为每个列表项创建ngClass

in html create ngClass for each list item

 <ul>
        <li><a data-action="filter-link" [ngClass]="{'active-link' : menus.allMenu}"  (click)="changeCategory(null,'allMenu')"><span></span>All</a></li>
        <li><a data-action="filter-link" [ngClass]="{'active-link' : menus.houseMenu}" (click)="changeCategory('House Favourites','houseMenu')"><span></span>House Favourites</a></li>
 </ul>

然后在ts中创建菜单模型

then in ts create model for menus

menus={allMenu:false,houseMenu:false}

具有功能的函数首先对其进行初始化，然后更改单击的内容

with function first initialize it then change clicked one

changeCategory(el,event){
    this.menus.allMenu=false;
    this.menus.houseMenu=false;
    this.menus[event]=!this.menus[event];
  }

这篇关于Angular/Typescript-单击链接时更改跨度的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！