單擊時更改按鈕的背景顏色

我是新手，我有一個問題。我試圖在點擊它們時更改按鈕的背景顏色和顏色。點擊按鈕時不能做任何事情，只是爲了改變它們的顏色。單擊時更改按鈕的背景顏色

例如，我想單擊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; 
    }

來源

2017-08-08 valio957

https://stackoverflow.com/questions/15463854/pressed-button-css否則，你應該尋找的JavaScript – Doomenik

因此，顏色應該切換或者只是單一的狀態？ –

由於您使用了引導程序，因此您可以使用錨點而不是[visited]修飾符的按鈕。 – Sal

我已經創建了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>

這將classactive添加到點擊btn如果它沒有前點擊。如果再次單擊它，active將被刪除。

要更改background-color或添加一些額外功能，請編輯.active的css。

來源

2017-08-08 11:10:41

非常感謝您的幫助。由於我是一個新手，我嘗試學習一些新的技巧，我想我應該很快就開始學習JS和jQuery，所以我可以做的效果。我學習了HTML，CSS和Bootstrap，並用按鈕想法來測試它。 – valio957

使用JS進行顏色變換。考慮一下這個按鈕，

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

包括腳本

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

這將改變顏色爲紅色，以你點擊哪個按鈕。 PS：包括JQuery庫這個工作。

來源

2017-08-08 11:12:27

Jquery可以在你的HTML代碼中實現魔法。更改CSS變量只是基本的變量。通過文檔https://api.jquery.com/獲取更多信息。樂於幫助。 –

如果你想使用沒有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>

來源

2017-08-08 11:16:33 Mikey

單擊時更改按鈕的背景顏色

回答

相關問題