クリックしたときのボタンの背景色の変更

Question

私は初心者です。質問があります。ボタンの背景色と色を変更しようとしています。ボタンはクリックしたときに色を変更するだけで何もしてはいけません。

たとえば、2つのボタンをクリックしたいとします。どちらも背景色を白から青に変更する必要があります。 1つ以上のボタンをクリックしたいのと同じことです。どのように私はこの効果を行うことができますか？私は以下の私の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; 
    } 

Answer 1

を私はjQueryで例を作成しました。見てください：

$('.btn').click(function() { 
 
    if ($(this).hasClass("active")) { 
 
    $(this).removeClass("active"); 
 
    } else { 
 
    $(this).addClass("active"); 
 
    } 
 
});

.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; 
 
}

<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>

それは前にクリックされていない場合、これがクリックされたbtnにclassactiveを追加します。もう一度クリックするとactiveが削除されます。

background-colorを変更するか、追加するには、cssを.activeに編集してください。

Answer 2

JSを使用して色を変更します。

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

これは、あなたがクリックした方のボタンに赤に色が変わります

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

スクリプトを含め、このボタンを考えてみましょう。

PS：これを動作させるにはJQueryライブラリを含めます。

Answer 3

Javascriptを使わずにCSSを使用したい場合は、チェックボックスとラベルのようにこれを行うことができます。

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

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

 
input[type=checkbox]:checked + label{ 
 
    background-color: blue; 
 
}

<input id="checkbox1" type="checkbox"/> 
 
<label for="checkbox1"></label>