尝试使简单的按钮在单击时处于活跃的，不同的样式。我正在使用HTML来布局按钮，使用CSS来设置样式，并希望使用一些JavaScript来做到这一点。
环顾四周，发现有许多不同的方法，例如使用Checkbox通过纯CSS，jQuery或JavaScript来制作按钮，我觉得JavaScript是我正在寻找的最接近的方法。
HTML
<button type="button" class="btn" id="btn1">Details</button>
CSS
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.btn:active {
background: #cecece;
text-decoration: none;
}
JavaScript
$('.btn').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
这里是一个jsfiddle链接：http://jsfiddle.net/w5h6rffo/
附加说明功能目标是使多个按钮具有相同的类，但每个按钮调用不同的功能。我正在调用函数，但不是按钮保持在第一次按下时处于活动状态，然后再次按下时处于非活动状态
您快要做好了，使用检查来确定您的元素是否具有active类的机制很好，但是jQuery具有toggleClass()函数，您可以编写以下内容：
toggleClass()然后在您的CSS中，代替样式psuedo $('.btn').click(function() {
$(this).toggleClass('active');
});
的样式，您将使用这样的类名：
:active您还希望将CSS中的：）].btn.active {
background: #cecece;
text-decoration: none;
}
选择器全部删除，因为您将不再需要它
正如:active指出的，保留dfsq伪选择器具有一定的价值：
我只是认为控制元素的活动状态（：active）为 重要。例如，如果没有它，则按钮看起来将相同 按下但未单击（鼠标悬停之前的鼠标悬停）。 UX略有 ：active更好。
但是也许我太挑剔
因此，您可能希望将选择器修改为：
:active因为这将同时影响.btn.active, .btn:active {
background: #cecece;
text-decoration: none;
}
和.active状态。
您可以将classList.toggle（）与.active类结合使用。
所以您的代码将如下所示：
:active此方法适用于无限数量的按钮。
请参阅<!DOCTYPE HTML>
<html>
<head>
<style>
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.btn.active {
background: #cecece;
text-decoration: none;
}
</style>
</head>
<body>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</body>
<script>
function toggleActiveState() {
this.classList.toggle('active');
}
var btns = document.querySelectorAll('.btn');
[].forEach.call(btns, function(btn) {
btn.addEventListener('click', toggleActiveState, false);
});
</script>
</html>
，现在正在发生的事情是，它工作得很好:-)，但是您要求它执行的操作和想要执行的操作不是同一件事。
我认为您需要修复css并将https://developer.mozilla.org/en-US/docs/Web/CSS/:active定义为类而不是伪类（未经测试，但在这里：）：
active您可以使用jQuery的toggleClass（className）函数。
.active {
background: #cecece;
}
http://api.jquery.com/toggleclass/
<script>
$("button.btn").click(function() {
$(this).toggleClass("active");
});
</script>
<style>
.active{
// your active style
}
<style>
:: HTML doc ::
const room = document.querySelector('.chat-rooms');
const btns = document.querySelectorAll('.btn');
room.addEventListener('click', e => {
btns.forEach(btn => {
if(btn.getAttribute('id') === e.target.getAttribute('id'))
btn.classList.add('active');
else
btn.classList.remove('active');
});
});.active,.btn:hover{ background-color:rgb(123, 255, 0); } <div class="chat-rooms">
<button class="btn" id="general">#general</button>
<button class="btn" id="gaming">#gaming</button>
<button class="btn" id="music">#music</button>
<button class="btn" id="coding">#coding</button>
</div>