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這是唯一的飛行）