Javascript 如何向元素中的一个添加类，并从元素中的所有同级删除类_Javascript_Html_Css_Angular

Javascript 如何向元素中的一个添加类，并从元素中的所有同级删除类

javascript html css angular

Javascript 如何向元素中的一个添加类，并从元素中的所有同级删除类,javascript,html,css,angular,Javascript,Html,Css,Angular,我的页面顶部有一个简单的菜单栏。我想单击一个元素并使用相反的颜色/背景色。显然，在更改单击元素的样式之前，我需要能够将所有同级元素重置回默认颜色/背景色到目前为止，我的单击事件函数如下所示 onSelect(event, source: Source): void { console.log(event.target); //reset all a elements do background-color:white and color:white var sibli

我的页面顶部有一个简单的菜单栏。我想单击一个元素并使用相反的颜色/背景色。显然，在更改单击元素的样式之前，我需要能够将所有同级元素重置回默认颜色/背景色

到目前为止，我的单击事件函数如下所示

onSelect(event, source: Source): void {
    console.log(event.target);

    //reset all a elements do background-color:white and color:white
    var siblings = event.target.parentNode.children;
    for(var i=0; i<siblings.length; i++) {
      siblings[i].style.backgroundColor = "white";
      siblings[i].style.color = "black";
    }

    event.target.style.backgroundColor = "black";
    event.target.style.color = "white";
    this._sharedService.publishData(source.id);

  }

my styles.css文件

body, a {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Open Sans,Helvetica Neue,Helvetica,sans-serif;
    line-height: 1.5;
    margin: 0;
    color: #111;
    background-color: #fff;
}

.sources-main {
    width:100%;
    background-color: #fff;
}

.articles-main {
    padding-top: 25px;
}

.sel-source {
    color:white;
    background-color: black;
}

一种有角度的方法是：

为你的黑/白颜色/背景制作课程
使用
```
ng class=”“
```
获取正确的类

为你的黑/白颜色/背景制作课程
使用
```
ng class=”“
```
获取正确的类

<nav id="nav" class="fixed sources-main">
  <div class="flex flex-wrap pl1 border-bottom">
      <a *ngFor="let source of sources; let i = index"
      [ngClass]="{'sel-source':isSelected === i}" 
      (click)="onSelect(i, source)" 
      class="h5 bold mr1">
        {{source.name}}
      </a>
  </div>
</nav>

import { Component, OnInit } from '@angular/core';
import {SourcesService} from './sources.service'
import { Source } from './source';

import { SharedService } from '../shared.service';

@Component({
  selector: 'app-sources',
  templateUrl: './sources.component.html',
  styleUrls: ['./sources.component.css'],
  providers:[SourcesService]
})
export class SourcesComponent implements OnInit {

  sources : Source[];
  isSelected;

  constructor(sourceService: SourcesService, private _sharedService: SharedService) { 
    sourceService.getSources().subscribe(sources => this.sources = sources);
  }

  ngOnInit() {
  }

  onSelect(index, source: Source): void {
    this.isSelected = index;
    this._sharedService.publishData(source.id);
  }

}

当您在ngFor中循环浏览项目时，还可以获取其索引
触发click事件时，还要在循环中传入索引并将其分配给变量
在组件中具有跟踪选定索引（将从未定义开始）的属性
在click事件处理程序中，将所选索引设置为传入的值
回到html中，根据索引是否为所选索引，使用ngClass动态设置一个类

从'@angular/core'导入{Component}；
@组成部分({
选择器：“测试”，
模板：`
{{item}}
`,
风格：[`
.选定{
背景色：黑色；
}
`]
})
导出类AppComponent{
selectedItem；
项目=[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”]；
麦克里克（索引）{
this.selectedItem=索引；
}
}

<nav id="nav" class="fixed sources-main">
  <div class="flex flex-wrap pl1 border-bottom">
      <a *ngFor="let source of sources; let i = index"
      [ngClass]="{'sel-source':isSelected === i}" 
      (click)="onSelect(i, source)" 
      class="h5 bold mr1">
        {{source.name}}
      </a>
  </div>
</nav>

import { Component, OnInit } from '@angular/core';
import {SourcesService} from './sources.service'
import { Source } from './source';

import { SharedService } from '../shared.service';

@Component({
  selector: 'app-sources',
  templateUrl: './sources.component.html',
  styleUrls: ['./sources.component.css'],
  providers:[SourcesService]
})
export class SourcesComponent implements OnInit {

  sources : Source[];
  isSelected;

  constructor(sourceService: SourcesService, private _sharedService: SharedService) { 
    sourceService.getSources().subscribe(sources => this.sources = sources);
  }

  ngOnInit() {
  }

  onSelect(index, source: Source): void {
    this.isSelected = index;
    this._sharedService.publishData(source.id);
  }

}

当您在ngFor中循环浏览项目时，还可以获取其索引
触发click事件时，还要在循环中传入索引并将其分配给变量
在组件中具有跟踪选定索引（将从未定义开始）的属性
在click事件处理程序中，将所选索引设置为传入的值
回到html中，根据索引是否为所选索引，使用ngClass动态设置一个类

从'@angular/core'导入{Component}；
@组成部分({
选择器：“测试”，
模板：`
{{item}}
`,
风格：[`
.选定{
背景色：黑色；
}
`]
})
导出类AppComponent{
selectedItem；
项目=[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”]；
麦克里克（索引）{
this.selectedItem=索引；
}
}

$index

index

$index

index