javascript - onclick 永久更改 html 标题的边框颜色，直到单击另一个标题

Question

目前，我有许多可点击的框，当我将鼠标悬停在它们上方时，它们会改变颜色。当我单击并按住特定框时，它会改变颜色。(通过在 css 中使用 :active 。

无论如何，我可以使边框的颜色永久改变，直到单击不同的框吗？例如，与 :active 属性相同，只是我不必按住鼠标？

我的代码:航类查看器.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>

航类查看器.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;
}

航类查看器组件.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 .

Make your DIVs focusable, by adding tabIndex:

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

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

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

Then you can simple use :focus pseudo-class

div:focus {
    background-color:red;
}

Demo: http://jsfiddle.net/mwbbcyja/