有4组按钮让其每组都能显示一个选中

一共4组按钮,需要每组按钮都要点上一个,点上之后有选中的背景色,应该怎么弄?(请忽略丑陋的颜色搭配)

img


代码如下:

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

节点操作,初始给一个显示的class例如active,点击的时候,移除active,给这个按钮添加active,