onclick永久性更改html标题的边框颜色，直到另一个被点击

Question

目前我有一些可点击的框，当我将鼠标悬停在它们上面时，它们会改变颜色。当我点击并按住一个特定的盒子时，它会改变颜色（通过使用：在css中有效）

是否有反正我可以使边框颜色永久变化直到点击不同的盒子？的：除了我活跃的房地产没有保持举行的鼠标

我的代码：？ 飞行viewer.html

<h3>Flights </h3> 
<div> 
    <ul class= "grid grid-pad"> 
     <a *ngFor="let flight of flights" class="col-1-4"> 
      <li class ="module flight" (click)="selectFlight(flight)"> 
       <h4>{{flight.number}}</h4> 
      </li> 
     </a> 
    </ul> 
</div> 


<div class="box" *ngIf="flightClicked"> 
    <!--<flight-selected [flight]="selectedFlight"></flight-selected>--> 
      You have selected flight: {{selectedFlight.number}}<br> 
      From: {{selectedFlight.origin}}<br> 
      Leaving at: {{selectedFlight.departure || date }}<br> 
      Going to: {{selectedFlight.destination}}<br> 
      Arriving at: {{selectedFlight.arrival || date}} 
</div> 

飞行viewer.css：

h3 { 
    text-align: center; 
    margin-bottom: 0; 
} 

h4 { 
    position: relative; 
} 

ul { 
    width: 1600px; 
    overflow-x: scroll; 
    background: #ccc; 
    white-space: nowrap; 
    vertical-align: middle; 

} 
div 
{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
} 

li { 
    display: inline-block; 

    /* if you need ie7 support */ 
    *display: inline; 
    zoom: 1 
} 

.module { 
    padding: 20px; 
    text-align: center; 
    color: #eee; 
    max-height: 120px; 
    min-width: 120px; 
    background-color: #607D8B; 
    border-radius: 2px; 
} 
.module:hover { 
    background-color: #EEE; 
    cursor: pointer; 
    color: #607d8b; 
} 
.module:active { 
    border: 5px solid #73AD21; 
} 


.box { 
    text-align: center; 
    margin-bottom: 0; 
    margin: auto; 
    width: 600px; 
    position:absolute; 
    top: 180px; 
    right: 0; 
    height: 100px; 
    border: 5px solid #73AD21; 
    text-align: center; 
    display: inline-block; 
} 

飞行观察者component.ts：

import { Component } from '@angular/core'; 

import { FlightService } from './flight.service'; 
import { Flight } from './flight.model' 

@Component({ 
    selector: 'flight-viewer', 
    templateUrl: 'app/flight-viewer.html', 
    styleUrls: ['app/flight-viewer.css'] 
}) 
export class FlightViewerComponent { 
    name = 'FlightViewerComponent'; 
    errorMessage = ""; 
    stateValid = true; 
    flights: Flight[]; 
    selectedFlight: Flight; 
    flightToUpdate: Flight; 
    flightClicked = false; 

    constructor(private service: FlightService) { 
     this.selectedFlight = null; 
     this.flightToUpdate = null; 
     this.fetchFlights(); 
    } 
    flightSelected(selected: Flight) { 
     console.log("Setting selected flight to: ", selected.number); 
     this.selectedFlight = selected; 
    } 
    flightUpdating(selected: Flight) { 
     console.log("Setting updateable flight to: ", selected.number); 
     this.flightToUpdate = selected; 
    } 
    updateFlight(flight: Flight) { 
     let errorMsg = `Could not update flight ${flight.number}`; 
     this.service 
      .updateFlight(flight) 
      .subscribe(() => this.fetchFlights(), 
         () => this.raiseError(errorMsg)); 
    } 

    selectFlight(selected: Flight) { 
     console.log("Just click on this flight ", selected.number, " for display"); 
     this.flightClicked = true; 
     this.selectedFlight = selected; 
    } 

    private fetchFlights() { 
     this.selectedFlight = null; 
     this.flightToUpdate = null; 
     this.service 
      .fetchFlights() 
      .subscribe(flights => this.flights = flights, 
         () => this.raiseError("No flights found!")); 
    } 
    private raiseError(text: string): void { 
     this.stateValid = false; 
     this.errorMessage = text; 
    } 

} 

谢谢！

Answer 1

我很确定这已经是answered。

让您的DIV可聚焦，通过添加的tabIndex：

<div tabindex="1"> 
Section 1 
</div> 

<div tabindex="2"> 
Section 2 
</div> 

<div tabindex="3"> 
Section 3 
</div> 

然后你可以简单的用:focus伪类

div:focus { 
    background-color:red; 
} 

演示：http://jsfiddle.net/mwbbcyja/

Answer 2

你可以使用 由角提供的[ngClass]指令来解决您的问题。

<a *ngFor="let flight of flights" class="col-1-4"> 
     <li [ngClass]="{'permanent-border': flight.id === selectedFlight?.id}" class ="module flight" (click)="selectFlight(flight)"> 
      <h4>{{flight.number}}</h4> 
     </li> 
    </a> 

这将CSS类permantent-border添加到<li>元素，如果飞行的ID与selectedFlight的ID相匹配（假设你已经指定了一个ID proberty，或者只是使用另一个proberty这是唯一的飞行）