onclick changer la couleur de la bordure d'un en-tête html de façon permanente jusqu'à ce qu'un autre soit cliqué

Question

Actuellement, j'ai un certain nombre de boîtes cliquables que lorsque je les survole, elles changent de couleur. Lorsque je clique sur une case spécifique et qu'elle la garde enfoncée, elle change de couleur (en utilisant: active en css.)

Y at-il une façon de changer la couleur de la bordure de façon permanente jusqu'à ce que je clique sur une case différente? la propriété: actif sauf que je ne pas garder la souris tenue à

Mon code: vol 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> 

vol 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; 
} 

flight-spectateur-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; 
    } 

} 

Merci!

Answer 1

Je suis assez sûr que cela a déjà été answered.

Faites vos DIVs focalisable, en ajoutant tabIndex:

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

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

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

Ensuite, vous pouvez simplement utiliser :focus pseudo-classe

div:focus { 
    background-color:red; 
} 

Démo: http://jsfiddle.net/mwbbcyja/

Answer 2

Vous peut utiliser la directive [ngClass] fournie par angular pour résoudre votre problème.

<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> 

Cela ajoutera la classe css permantent-border à l'élément <li>, si l'identifiant du vol correspond à l'identifiant avec le selectedFlight (En supposant que vous avez un proberty identifiant indiqué, ou tout simplement utiliser un autre proberty qui est unique pour la vol)