javascript - onclick 다른 것을 클릭 할 때까지 html 헤더의 테두리 색상을 영구적으로 변경합니다

현재 마우스를 클릭하면 색상이 변하는 클릭 가능한 상자가 많이 있습니다. 특정 상자를 길게 클릭하면 색상이 변경됩니다 (CSS에서 : active를 사용하여

어쨌든 다른 상자를 클릭 할 때까지 테두리의 색을 영구적으로 변경할 수 있습니까? 예를 들어 마우스를 붙잡을 필요가 없다는 점을 제외하고 : active 속성과 동일합니까?

내 코드 : flight-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>

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

감사합니다!