Css 如何使用NativeScript设置菜单栏中活动项的颜色？

我想根据选择的菜单栏更改菜单项的颜色。因此，当“家”被选中时，我希望它是红色的，所有其他项目是黑色的。当我选择“设置”时，它应该变成红色，而所有其他项目都应该是黑色。我试过了，但没能成功

HTML

<GridLayout rows="*,60">
    <StackLayout row="1" orientation="horizontal" class="foot" backgroundColor="#eae8e8" padding="10 5 10 5" id="myMenu" [ngClass]="{ 'active': itemActive }">
        <StackLayout (tap)="gofp()" width="30%" textAlignment="center">
            <Label text="Home">
            </Label>
        </StackLayout>
        <StackLayout (tap)="gosettings()" width="35%" textAlignment="center">
            <Label  text="Settings">
            </Label>
        </StackLayout>
                <StackLayout (tap)="goimages()" width="35%" textAlignment="center">
            <Label text="Images">
            </Label>
              </StackLayout>
    </StackLayout>
</GridLayout>

---

您是指菜单项的标签吗？如果是这样，那么有几种方法可以实现，您可以直接使用

元素上的

style.color

，也可以使用CSS类（

class=“name of class”

）

因此，在实践中：

<Label text="Home" style.color="red"></Label>

然后，您需要添加一些逻辑来实际跟踪所选的菜单项。在您的

home.component.ts中，在构造函数之前添加以下内容：
selectedMenuItemId:string
，在构造函数中添加
this.selectedMenuItemId=“home”并在构造函数之后添加：

public selectMenuItem(id: string) {
  this.selectedMenuItemId = id;
} 

然后，对于每个菜单项，您需要首先用以下内容替换tap处理程序：
（tap）=“selectMenuItem（'home'）”
，并将以下内容添加到每个菜单标签：
[ngClass]=“{color--red'：selectedMenuItemId=='home'）”
，确保更改id

谢谢您的回答。我想要这样的图像：：
.color--red {
    color: red;
}

public selectMenuItem(id: string) {
  this.selectedMenuItemId = id;
}