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屋!