>

현재 마우스를 클릭하면 색상이 변하는 클릭 가능한 상자가 많이 있습니다. 특정 상자를 길게 클릭하면 색상이 변경됩니다 (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;
    }
}

감사합니다!

  • 답변 # 1

    이것이 이미 답변 된 것 같습니다.

    와이즈 비즈 와이즈 비즈

         

    그러면

    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>
    
    

         

    데모 : http://jsfiddle.net/mwbbcyja/

    yz

    :focus 를 사용할 수 있습니다  문제를 해결하기 위해 각도로 제공되는 지시문.

    div:focus {
        background-color:red;
    }
    
    

    이것은 CSS 클래스 [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> 에  요소, 비행 ID가 selectedFlight와 ID와 일치하는 경우 (ID proberty가 지정되었거나 비행에 고유 한 다른 proberty를 사용한다고 가정)

    permantent-border

관련 자료

  • 이전 각도 및 웹팩의 URL 재 작성 문제
  • 다음 swift3 - Alamofire에서 GET 메소드에 대한 맞춤 매개 변수를 보내는 방법은 무엇입니까?