Wie man eine Hintergrundfarbe weiß auf Drop-Down

Question

Hallo Leute, ich benutze diese codepen als Beispiel für meine Website. Meine Frage ist, auf der fünften Seite ist es möglich, die Dropdown-Box zu machen, wenn Sie auf eine andere Farbe klicken?

Html:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'> 

<div class="patch-container"> 
    <div class="patch-item patch-button" data-patch-panel="1">One</div> 
    <div class="patch-panel" data-patch-panel="1">One</div> 
    <div class="patch-item patch-button" data-patch-panel="2">Two</div> 
    <div class="patch-panel" data-patch-panel="2">Two</div> 
    <div class="patch-item patch-button" data-patch-panel="3">Three</div> 
    <div class="patch-panel" data-patch-panel="3">Three</div> 
    <div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div> 
    <div class="patch-panel" data-patch-panel="4">Four</div> 
    <div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div> 
    <div class="patch-panel" data-patch-panel="5">Five</div> 
</div> 

CSS:

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
    -webkit-appearance: none; 
} 

body { 
    height: 100%; 
    background-color: #22313F; 
    font-family: 'Open Sans'; 
    -webkit-font-smoothing: subpixel-antialiased; 
} 
/******************************** 
Plugin Hero Example 
********************************/ 

.patch-button { 
    color: #FFF; 
    cursor: pointer; 
    font-size: 1em; 
    font-size: 1.5em; 
    letter-spacing: 0; 
    line-height: 150px; 
} 

.patch-button:hover { 
    border: solid 3px #FFF; 
    line-height: 144px; 
} 

.patch-container { 
    background-color: #2C3E50; 
    border-radius: 5px; 
    color: #FFF; 
    margin: 4%; 
    overflow: auto; 
    padding: 2%; 
    position: relative; 
    text-align: center; 
    zoom: 1; 
    max-width: 1000px; 
} 

.patch-item { 
    background-color: #FFF; 
    border-radius: 4px; 
    float: left; 
    height: 150px; 
    margin: 0 0 2% 0; 
    width: 100%; 
} 

.patch-panel { 
    background-color: #FFF; 
    border-radius: 4px; 
    color: #FFF; 
    display: none; 
    float: left; 
    font-size: 1.5em; 
    height: 250px; 
    line-height: 250px; 
    margin: 0 0 2% 0; 
    width: 100%; 
} 

[data-patch-panel='1'], 
[data-patch-panel='5'], 
[data-patch-panel='8'] { 
    background: #F5AB35; 
} 

[data-patch-panel='2'], 
[data-patch-panel='6'], 
[data-patch-panel='9'] { 
    background: #00B16A; 
} 

[data-patch-panel='3'], 
[data-patch-panel='7'], 
[data-patch-panel='10'] { 
    background: #E74C3C; 
} 

[data-patch-panel='4'], 
[data-patch-panel='8'], 
[data-patch-panel='12'] { 
    background: #3498DB; 
} 
/******************************** 
Media Queries 
********************************/ 

@media only screen and (min-width: 550px) { 
    h2 { 
    font-size: 3.3rem; 
    } 
    .patch-item { 
    margin: 1%; 
    width: 48%; 
    } 
    .patch-panel { 
    margin: 1%; 
    width: 98%; 
    } 
    .components { 
    margin: 1.5%; 
    width: 46%; 
    } 
} 

@media only screen and (min-width: 992px) { 
    .patch-container { 
    margin: 4% auto; 
    } 
    .patch-item { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 32%; 
    } 
    .patch-panel { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 98.6666%; 
    width: calc(100% - (4%/6) * 2); 
    } 
    .resize { 
    margin: 50px auto -2%; 
    } 
    .wide { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 48.6666%; 
    width: calc(50% - (4%/6) * 2); 
    } 
    .thin { 
    width: 23.6666%; 
    width: calc(25% - (4%/6) * 2); 
    } 
} 

Also wieder nur zu erklären, funktioniert alles einwandfrei. Aber was ich will, ist auf dem Panel 5. Die Box selbst ist in Ordnung, aber wenn Sie darauf klicken, möchte ich es nicht orange, sondern eine andere Farbe auf der neuen Box, die erscheint. Also für die neue Box erscheinen, würde ich es mit einem schwarzen Rand weiß wie, aber ich bin nicht sicher, wie

[data-patch-panel='1'], 
[data-patch-panel='5'], 
[data-patch-panel='8'] { 
    background: #F5AB35; 
} 

mit diesem Teil versucht zu spielen, aber dies wirkt sich auf beide Boxen.

Danke für die Hilfe

Answer 1

Sie wollen es die Platte eine andere Klasse, ID oder ein Attribut geben, außer darüber von der Platte zu identifizieren. Etwas wie folgt aus:

<div class="patch-panel panel-five" data-patch-panel="5">Five</div> 

und fügen Sie dann

.panel-five { 
    background-color: #FFFFFF; 
} 

zu Ihrem CSS