如何为不同的按钮组选择和更改颜色按钮

我正在创建两个按钮组。每当我点击第二个按钮组中的一个按钮时，第一个按钮组中已经选中的按钮就会被取消选中。我只能在两个组中选择一个按钮。我想从每组中选择一个按钮。这是我使用的代码：focus（css）作为按钮。我需要使用bootsrap（btn主）的按钮类型。这是我的HTML代码和CSS，请帮助我。

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" style="outline-color:red; " @onclick="() => UpdateTheChart(11)">@Language.T35</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
      <button type="button" class="btn btn-primary" btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
      <button type="button" class="btn btn-primary"@onclick="() => UpdateTheChart(22)">@Language.T38</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
    </div>
  </div>
</div>

CSS  

.show {
  display          : block;
  }
.btn-group {
  margin-top       : 20px;
  overflow         : hidden;
  }
.btn {
  font-weight      : bold;
  color            : white;
  border           : none;
  outline          : none;
  padding          : 12px 16px;
  /*blue*/
  background-color : #2c75ff;
  cursor           : pointer;
  }
.btn:hover {
  font-weight      : bold;
  color            : white;
  /*green*/
  background-color : #85c995;
  }
.btn:focus {
  /*green*/
  background-color : #85c995;
  color            : white;
  }

我试过标签radio&Javascript不起作用。

标签：组中,颜色,UpdateTheChart,Language,更改,color,按钮,btn
来源： https://www.cnblogs.com/chinancsa/p/15963882.html