我对css不太了解。
_sideButton 默认颜色white
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
当我们选择BUTTON 2时，_sideButton变成红色，并且总是变红。
选择BUTTON 1时，按钮1 _sideButton变为红色，然后BUTTON2 _sideButton成为默认值（白色）。
*此处 === JSFiddle ===
之前 - / -
/*** Here guys ***/
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;}
._tabFolder:hover{background-color:rgba(255,255,255,0.1)}
._tabFolder:active{background-color:rgba(29, 33, 41, 1)}
._itemPosition{align-items:center;display:flex}
._5bme ._sideFolder{background-color:#066cd2}
._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block}
._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}<body style="background:grey;">
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 1</span>
</div>
</div>
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 2</span>
</div>
</div>
</body>
答案 0 :(得分：1)
对于CSS，您可以隐藏<input type='checkbox'或'radio'>并使用<label for='ID OF RADIO / CHECKBOX'></label>。标签将作为按钮，而chx / rad将放置在标签之前，并保持标签的“状态”持久（例如，变为红色并无限期保持红色。）状态将由rad /确定。 chx是 :checked 。
.radio:checked + .label { color:red }
.radio 按钮是：已选中，并且在 + 是 .label 之后，该文字将变为 .label 红色。 + 是adjacent sibling combinator，您也可以这样：〜 general sibling combinator。
您也可以使用:target selector。使用<a> nchor标记为其href属性指定元素#id中的值。然后为元素分配:target选择器。类似于rad / chx＆amp; label combo，它允许我们使用CSS动态更改元素样式并保持持久性。
虽然演示显示了“较旧”的兄弟（即单选按钮）和“较年轻：兄弟（即标签）”关系，但此演示也可以轻松地在父子关系中工作（提示：删除 + ）。注意，<a>和element:target之间没有必要的关系（除了它们都必须在同一文档上。
Checkbox/Radio Button & Label Hack
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>