javascript - 让 CSS 按钮在点击时变为绿色并保持绿色

Question

我正在做一个元素，我必须为网页做一些前端工作。我有一些按钮需要单击并变成某种颜色并在单击后保持相同的颜色。

下面是我的 CSS <style> 对于特定按钮:

.button {
    background-color: #ffffff;
    border: 1px solid #3e1313;

    color: #3e1313;
    padding: 10px;
    text-align: center;
    text-decoration: none;

    font-size: 12px;
    margin: 4px 2px;
}

button:hover{background-color:orange;}

.button4 {border-radius: 10px;}

超文本:

<div class="row">
  <div class="columnExpand">
    <label class="container" name="lblDriverExperience">
      Driver Experience
      <input type="checkbox" name="chkDriverExperience" 
             onchange="divToggle('divDriver')">
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="columnOption" id="divDriver">
    <button class="button button4">Good</button>
    <button class="button button4">Fair</button>
    <button class="button button4">Poor</button>
  </div>
</div>

JavaScript:

<script type="text/javascript">
  $("#test").click(function() {$(this).toggleClass( "active")})
</script>

同样，按钮在悬停时变为棕色，但我希望它在单击时变为绿色并保持绿色。有很多问题，但没有一个真正让我找到答案。

Answer 1

您可以在按钮上切换类.active

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

.button {
    background-color: #ffffff;
    border: 1px solid #3e1313;

    color: #3e1313;
    padding: 10px;
    text-align: center;
    text-decoration: none;

    font-size: 12px;
    margin: 4px 2px;
}

button:hover{background-color:orange;}

.button4 {border-radius: 10px;}

.columnOption .button.active {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="columnExpand">
    <label class="container" name="lblDriverExperience">
      Driver Experience
      <input type="checkbox" name="chkDriverExperience" 
             onchange="divToggle('divDriver')">
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="columnOption" id="divDriver">
    <button class="button button4">Good</button>
    <button class="button button4">Fair</button>
    <button class="button button4">Poor</button>
  </div>
</div>