我想要做的是，當我按下一個按鈕時，在它周圍放置一個邊框，以將其顯示為活動狀態。我也試圖在 JavaScript 中讓按鈕處于活動狀態，但我還沒有做到這一點。誰能幫我？
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.active_button {
border: 2px solid black;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>uj5u.com熱心網友回復：
你只需要讓你的 CSS 選擇器更加具體。它被標準按鈕樣式覆寫。
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.cable-choose button.active_button { /* <------------ RIGHT HERE */
border: 2px solid black;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>uj5u.com熱心網友回復：
我認為它正在作業 - 當我檢查我點擊的那個時，我看到 ......不過，您的 active_button 樣式與您的懸停/焦點/活動狀態相同（一個設定為 #000，另一個設定為“黑色”-同色）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355514.html
標籤：javascript html css 按钮