javascript - 仅在获得焦点时保留 CSS 效果

Question

我有一张 table 。每个表格行都有一个按钮组，其中包含"is"/“否”/“NA”。它还有一些文本框等...

当用户单击"is"时，按钮将变为红色。当他们单击“否”时，按钮是绿色的，等等......这有效。问题是当我单击按钮时，例如单击文本框。按钮失去颜色。有什么想法吗？

这是 HTML 的一部分...(该行还有一些文本框等)

div.btn-group>button[data-rating='Yes']:default,
div.btn-group>button[data-rating='Yes']:hover,
div.btn-group>button[data-rating='Yes']:focus,
div.btn-group>button[data-rating='Yes']:active,
div.btn-group>button[data-rating='Yes'].active {
  background-color: #00FF00;
  /*background-image: linear-gradient(to bottom, #fff 0, #00FF00 100%);*/
}

<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default" data-rating="Yes">Yes</button>
  <button type="button" class="btn btn-default" data-rating="No">No</button>
  <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

Answer 1

按钮失去焦点后，它将恢复到之前的状态。

使用 JavaScript 向其应用一个类以使其保持事件状态:

let btnOn = document.querySelector('.btn-on');

btnOn.addEventListener('click',()=>{
    btnOn.classList.add('active');
})

.active {
    background-color: #00FF00;
}

<div class="btn-group" role="group" aria-label="..." id="Rating">
    <button type="button" class="btn btn-default btn-on" data-rating="Yes">Yes</button>
    <button type="button" class="btn btn-default" data-rating="No">No</button>
    <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

fiddle https://jsfiddle.net/d2wfqwf8/