onclick change border colour of a html header permanently until another is clicked

Question

Currently I have a number of clickable boxes that when I hover over them, they change colour. When I click and hold on a specific box, it changes colour.(by using :active in css.

Is there anyway I can make the colour of the border change permanently until a different box is clicked? E.G the same as the :active property except I don't have to keep the mouse held in?

My Code: 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;
    }

}

Thanks!

Possible duplicate of [Change div background color on click using only css](https://stackoverflow.com/questions/27069142/change-div-background-color-on-click-using-only-css) — RubbelDieKatz, Sep 08 '17 at 09:56

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

I'm quite sure that this has already been 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/

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 08 '17 at 09:55

RubbelDieKatz

1,134
1
15
32

score 0 · Answer 2 · answered Sep 08 '17 at 10:06

You can use the [ngClass] directive provided by angular to solve your problem.

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

This will add the css class permantent-border to the <li> element, if the id of the flight matches the id with the selectedFlight (Assuming you have an id proberty specified, or just use another proberty which is unique for the flight)

I'm curious, where's the difference to the old answer using CSS? https://stackoverflow.com/a/46113731/6203984 Could you maybe create a jsfiddle? — RubbelDieKatz, Sep 08 '17 at 10:43

onclick change border colour of a html header permanently until another is clicked

2 Answers2