Question

我有一个如下的无序列表。我想从先前激活的li元素中删除active和arrow-down类（以防我单击任何其他li元素）并想向其添加向上箭头类。此外，我想将active和arrow-down类添加到最近单击的li元素中。在以下代码中，link 1默认是激活的。

<ul class="sibe-bar-menu">
    <li class="active arrow-down"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="arrow-up"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

在单击第三个li元素之后，我想一次获得如下所示的代码。

<ul class="sibe-bar-menu">
    <li class="arrow-up"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="active arrow-down"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

Answer 1

为此，您可以将ngClass与clicked结合使用。

在HTML中，向其中每个添加一个click函数以将其选中。另外，如果选择了ngClass，则显示一个相关的类。

<ul class="sibe-bar-menu">
    <li [ngClass]="clicked === 0 ? 'active arrow-down' : 'arrow-up'" (click)="select(0)"><a href="#">1</a></li>
    <li [ngClass]="clicked === 1 ? 'active arrow-down' : 'arrow-up'" (click)="select(1)"><a href="#">2</a></li>
    <li [ngClass]="clicked === 2 ? 'active arrow-down' : 'arrow-up'" (click)="select(2)"><a href="#">3</a></li>
    <li [ngClass]="clicked === 3 ? 'active arrow-down' : 'arrow-up'" (click)="select(3)"><a href="#">4</a></li>
</ul>

最后，在后端创建select函数

clicked = 0;

select(i) {
  this.clicked = i;
}

Here is a StackBlitz demo

如何在角度2以上的点击事件后在li上切换课程

1 个答案: