活動按鈕不起作用

我希望這些按鈕在點擊時保持活動狀態，但無法使其工作，並且「currentButton」在頁面加載時默認處於活動狀態。我可以看到以下樣式：點擊任一按鈕時處於活動狀態，但點擊後不會保持活動狀態。活動按鈕不起作用

HTML爲2個按鈕：

<div class="w3-center invButtons"> 
    <button class="w3-button currentButton">Current</button> 
    <button class="w3-button pastButton">Past</button> 
</div>

CSS：

.w3-button{ 
    border: 2px solid #555555; 
    background-color: white; 
    color: black; 
    padding: 4px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
    width: 130px; 
    border-radius: 8px; 
} 

.invButtons { 
    padding-bottom: 16px; 
    margin: 30px 10px; 
} 

.w3-button:hover { 
    color:#000!important; 
    background-color: gray!important; 
} 

.w3-button:active { 
    color:yellow!important; 
    background-color: yellow!important; 
}

來源

2017-06-01 Lilly

可能的重複：https://stackoverflow.com/questions/15463854/pressed-button-css – smrubin

你必須使用按鈕嗎？並可以使用JavaScript？ –

我不必使用按鈕，我正在使用jQuery。 – Lilly

的:active僞類而按鈕被與之交互僅被施加（即，「活性」）。就像:hover psuedo類僅在鼠標懸停在元素上時應用。

如果你想將一個樣式應用到一個元素來表示它是一個組中的活動/選定/使用中的元素，你需要在點擊它之後添加某種類型的.active類，類。

然後將該類添加到要啓動活動的html中的按鈕標記。

來源

2017-06-01 21:00:54 sn3ll

活動按鈕不起作用

回答

相關問題