按钮：使用 JavaScript 和 CSS 激活
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34186640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button: Active using JavaScript and CSS
提问by axchink
Trying to make a simple button to be in an active, different style when it is clicked on. I am using HTML to lay out the button, CSS for styling, and hoping to use a bit of JavaScript to do so.
试图使一个简单的按钮在单击时处于活动的、不同的样式。我使用 HTML 来布置按钮，CSS 用于样式，并希望使用一些 JavaScript 来做到这一点。
After looking around SO and finding there are many different ways such as using Checkbox to make a button by pure CSS, or jQuery, or JavaScript, I feel that JavaScript is the most close way that I am looking at.
环顾四周，发现有很多不同的方法，例如使用Checkbox通过纯CSS或jQuery或JavaScript制作按钮，我觉得JavaScript是我正在寻找的最接近的方式。
HTML
HTML
<button type="button" class="btn" id="btn1">Details</button>
CSS
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
JavaScript
$('.btn').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
Here is a jsfiddle link: http://jsfiddle.net/w5h6rffo/
这是一个 jsfiddle 链接：http: //jsfiddle.net/w5h6rffo/
Additional Note
Feature goal is to have multiple buttons with the same class but each button calling to a different functions. I have the calling of the functions working, just not the button staying at an active state when it is first pressed, then at an inactive state when it is pressed again
附加说明
功能目标是拥有多个具有相同类的按钮，但每个按钮调用不同的功能。我有函数的调用工作，但不是第一次按下按钮时保持活动状态，然后再次按下时处于非活动状态
采纳答案by SidOfc
You're close to doing it right, the mechanism you built using a check to see if your element has the activeclass is nice but jQuery has a toggleClass()function which allows you to just write the following:
您已经接近做对了，您使用检查构建的机制来查看您的元素是否具有active该类很好，但 jQuery 有一个toggleClass()函数，它允许您只编写以下内容：
$('.btn').click(function() {
$(this).toggleClass('active');
});
Then in your CSS, instead of styling the psuedo :activeyou'll use a classname instead like this:
然后在您的 CSS 中，:active您将使用类名而不是样式化伪代码，如下所示：
.btn.active {
background: #cecece;
text-decoration: none;
}
You'll also want to remove the :):activeselector from your CSS alltogether since you won't be needing it anymore
您还需要:):active从 CSS 中完全删除选择器，因为您不再需要它了
As dfsqpointed out there is a certain value in retaining the :activepsuedo selector:
正如dfsq指出的，保留:active伪选择器有一定的价值：
I just think that active state (:active) for the control elements is important. For example, without it button will look the same if it is pressed but not clicked (mouseout before mouseup). UX is slightly better with :active.
But maybe I'm too picky
我只是认为控制元素的活动状态 (:active) 很重要。例如，如果没有它按钮被按下但没有被点击（mouseout before mouseup）看起来是一样的。使用 :active 时 UX 稍微好一些。
但也许我太挑剔了
For this reason you might want to modify the selector to be:
出于这个原因，您可能希望将选择器修改为：
.btn.active, .btn:active {
background: #cecece;
text-decoration: none;
}
As this will affect both the .activeand the :activestate.
因为这将影响.active和:active状态。
回答by Paul B.
You could use classList.toggle() in conjunction to a .active class.
您可以将 classList.toggle() 与 .active 类结合使用。
So your code would look something like this:
所以你的代码看起来像这样：
<!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>
This aproach would work for a infinite number of buttons.
这种方法适用于无限数量的按钮。
回答by David
See https://developer.mozilla.org/en-US/docs/Web/CSS/:activeWhat's happening now is that it's working just fine :-) but what you're asking it to do and what you want it to do are not the same thing.
请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:active现在发生的事情是它工作得很好:-) 但是你要求它做什么以及你想要它做什么做的不是一回事。
I think you need to fix your css and define activeas a class rather than a pseudo-class (untested, but here goes):
我认为你需要修复你的 css 并定义active为一个类而不是一个伪类（未经测试，但在这里）：
.active {
background: #cecece;
}
回答by Swarnendu Paul
You can use jQuery's toggleClass( className )function.
您可以使用 jQuery 的toggleClass( className )函数。
http://api.jquery.com/toggleclass/
http://api.jquery.com/toggleclass/
<script>
$("button.btn").click(function() {
$(this).toggleClass("active");
});
</script>
<style>
.active{
// your active style
}
<style>
