一共4组按钮,需要每组按钮都要点上一个,点上之后有选中的背景色,应该怎么弄?(请忽略丑陋的颜色搭配)
代码如下:
<div class="modal-body" style="color: #fff;">
<div class="row one">
<button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-1">1-1</button>
<button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-2">1-2</button>
<button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-3">1-3</button>
<button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-4">1-4</button>
</div>
<div class="row two">
<div class="col-xs-1">
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-1">2-1</button></br>
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-2">2-2</button></br>
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-3">2-3</button></br>
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-4">2-4</button></br>
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-5">2-5</button></br>
<button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-6">2-6</button></br>
</div>
</div>
</div>
CSS代码:
.modal-body {
color: #fff;
padding: .0625rem;
.one {
height: 8%;
margin-left: 0rem;
#btncar {
color: #fff;
background-color: blue;
padding: .0625rem .0625rem .0625rem .0625rem;
width: 24.6%;
height: 98%;
}
#btncar:hover {
background-color: #4CAF50; /* Green */
color: white;
}
#btncar:focus {
background-color: #4CAF50; /* Green */
color: white;
}
}
.two {
margin-left: 0rem;
.col-xs-1 {
margin: 0rem 0rem 0rem 0rem;
padding: 0rem .0625rem 0rem 0rem;
#btndep {
color: #fff;
background-color: green;
width: 100%;
height: 13%;
margin-top: 3%;
margin-right: 0px;
}
#btndep:hover {
background-color: #4CAF50; /* Green */
color: white;
}
#btndep:focus {
background-color: #4CAF50; /* Green */
color: white;
}