单击时更改按钮的背景颜色

时间：2017-08-08 11:04:19

标签： css html5 css3

我是新手，我有一个问题。当我点击它们时，我试图改变按钮的背景颜色和颜色。单击时按钮不能执行任何操作，只需更改颜色即可。

例如，我想点击2个按钮......两者都必须将背景颜色从白色更改为蓝色。如果我想点击一个或多个按钮，同样的事情。我该怎么做？我在下面发布我的HTML和CSS：

<div class="multiple-choice gradient">
    <div class="container">
        <h2 class="multiple-choice-h">Please select the products, that you are interested in:</h2>
        <div class="choice">
            <div class="purvi-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="vtori-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="treti-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">Interested in all</button>
                    </div>
                </div>
            </div>
            <div class="chetvurti-red">
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn-primary">Continue to Subscribe Page</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS 

  .multiple-choice-h {
    color:white;
    font-weight: 100;
    font-size:3.1em;
    font-family: "Roboto";
    line-height: 1.2;
    margin-top:5%;
    word-spacing: 8px;
    letter-spacing: 1px;
}
.choice {
    margin-top:6%;
}
.btn {
    width:100%;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(45, 157, 225);
    border-radius: 3px;
    background-color: #ffffff;
    color:#0077c0;
    box-shadow: 0px 4px 0px 0px #0083aa;
    text-align:left;
    padding-left:20px;
    padding-top:24px;
    padding-bottom:24px;
    font-size:1.7em;
    font-weight: bold;
}

    .vtori-red {
        margin-top:1.5%;
    }

    .treti-red {
        margin-top:1.5%;
    }

    .chetvurti-red {
        margin-top:5%;
    }

    .btn-primary {
        width:100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(../img/arrow-right.png) #f49500 no-repeat 67% !important;
        color:black;
        font-size:1.8em;
        font-weight: bold;
        font-family: "Roboto";
        color:white;
        padding-top:20px;
        padding-bottom:20px;
        border:none;
        box-shadow: 0px 4px 0px 0px #0083aa;
        text-align:center;
        border-radius:5px;
        margin-bottom:100px;
    }

3 个答案:

答案 0 :(得分：2)

我已经使用jQuery创建了一个示例。看看：

＆＃13;
＆＃13; 
$('.btn').click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(this).addClass("active");
  }
});
＆＃13; 
.multiple-choice-h {
  color: white;
  font-weight: 100;
  font-size: 3.1em;
  font-family: "Roboto";
  line-height: 1.2;
  margin-top: 5%;
  word-spacing: 8px;
  letter-spacing: 1px;
}

.choice {
  margin-top: 6%;
}

.btn {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(45, 157, 225);
  border-radius: 3px;
  background-color: #ffffff;
  color: #0077c0;
  box-shadow: 0px 4px 0px 0px #0083aa;
  text-align: left;
  padding-left: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 1.7em;
  font-weight: bold;
}

.vtori-red {
  margin-top: 1.5%;
}

.treti-red {
  margin-top: 1.5%;
}

.chetvurti-red {
  margin-top: 5%;
}

.btn-primary {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/arrow-right.png) #f49500 no-repeat 67% !important;
  color: black;
  font-size: 1.8em;
  font-weight: bold;
  font-family: "Roboto";
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  box-shadow: 0px 4px 0px 0px #0083aa;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 100px;
}

.active {
  background-color: red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple-choice gradient">
  <div class="container">
    <h2 class="multiple-choice-h">Please select the products, that you are interested in:</h2>
    <div class="choice">
      <div class="purvi-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
        </div>
      </div>
      <div class="vtori-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
        </div>
      </div>
      <div class="treti-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">Interested in all</button>
          </div>
        </div>
      </div>
      <div class="chetvurti-red">
        <div class="row">
          <div class="col-md-12">
            <button type="button" class="btn-primary">Continue to Subscribe Page</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

如果之前未点击class active，则会将btn active添加到点击的background-color。如果再次点击它，则会移除css。

要更改.active或添加一些额外内容，只需修改public class BlackJack { public static BlackJack blackjack; public int chips; public static int[] deck; public static int ct = 0, sc1, sc2; Random random; public BlackJack() { deck(); deal(); System.out.println(sc1); System.out.println(sc2); } public void deck() { deck = new int[52]; for (int i = 0; i < 52; i++) { if(i % 4 == 0) { ct++; } deck[i] = ct; } } public void deal() { random = new Random(52); sc1 = deck[random.nextInt(52)]; sc2 = deck[random.nextInt(52)]; } public static void main(String[] args) { blackjack = new BlackJack(); } } 的{​​{1}}。

答案 1 :(得分：0)

使用JS进行换色。考虑一下这个按钮，

<button type="button" class="btn">text</button>

包含脚本

<script>
$('.btn').click(function(){
 $(this).css('color','red');
});
</script>

这会将颜色更改为红色到您点击的任何按钮。

PS：包含JQuery库以实现此目的。

答案 2 :(得分：0)

如果您想在没有Javascript的情况下使用CSS，那么您可以使用复选框和标签来执行此操作;

＆＃13;
＆＃13; 
input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  background-color: red;
  padding: 10px 15px;
}

input[type=checkbox]:checked + label{
  background-color: blue;
}
＆＃13; 
<input id="checkbox1" type="checkbox"/>
<label for="checkbox1"></label>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题