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上切换课程button

$(".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>

Answer 2

对于您要寻找的内容，这可能太简单了，但对我有用：

<script type="text/javascript">
$( ".button" ).click(function() { $( this ).css( "background-color", "green" )} );
</script>

提琴： https://jsfiddle.net/CriticalError/jLst5owk/

Answer 3

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

<div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>

使CSS按钮在点击时变为绿色并保持绿色

3 个答案: