活动按钮不起作用

我希望这些按钮在点击时保持活动状态，但无法使其工作，并且“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

活动按钮不起作用

回答

相关问题