按钮：使用 JavaScript 和 CSS 激活答案

【问题标题】：Button: Active using JavaScript and CSS按钮：使用 JavaScript 和 CSS 激活
【发布时间】：2016-03-15 04:31:12
【问题描述】：

尝试使一个简单的按钮在单击时处于活动的、不同的样式中。我正在使用 HTML 来布置按钮，使用 CSS 来设置样式，并希望使用一些 JavaScript 来做到这一点。

看了一圈SO，发现有很多不同的方式，比如用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/

补充说明
功能目标是让多个按钮具有相同的类，但每个按钮调用不同的功能。我调用了函数，只是按钮在第一次按下时保持在处于活动状态，然后在再次按下时处于非活动状态

【问题讨论】：

标签： javascript html css button

【解决方案1】：

您已经接近正确了，您使用检查您的元素是否具有 active 类构建的机制很好，但 jQuery 有一个 toggleClass() 函数，它允许您编写以下内容：

$('.btn').click(function() {
    $(this).toggleClass('active');
});

然后在你的 CSS 中，而不是设置伪 :active 的样式，你将使用这样的类名：

.btn.active {
    background: #cecece;
    text-decoration: none;
}

~~您还需要从 CSS 中完全删除 :active 选择器，因为您将不再需要它~~ :)

正如dfsq 指出的，保留:active 伪选择器有一定的价值：

我只是认为控制元素的活动状态（：活动）是重要的。例如，如果没有它，按钮将看起来相同，如果它是按下但未点击（mouseout before mouseup）。 UX略显使用 :active 更好。 ~~但也许我太挑剔了~~

因此，您可能希望将选择器修改为：

.btn.active, .btn:active {
    background: #cecece;
    text-decoration: none;
}

因为这会影响 '.active' 和 ':active' 状态。

【讨论】：

“你还需要从你的 CSS 中移除 :active 选择器，因为你不再需要它了”。不，实际上仍然需要它。 .active 和 :active 都是必需的。效果更好。
天啊！你的答案比我的要快 40 秒。
@dfsq 绝对不需要，只有当用户使用基于标签的导航而不是鼠标时，它才会有所不同，至于效果，它不会看起来更好，而是同样所以是的，你可以删除:active选择器
你没有错，你说得对，可以毫无问题地删除它。我只是认为控制元素的活动状态（：活动）很重要。例如，如果没有它，按钮在按下但未单击时看起来相同（mouseout before mouseup）。使用 :active 时，用户体验稍微更好。但也许我太挑剔了。
您需要担心 DOM 是否已加载 如果您在元素存在之前包含您的文件，它将不起作用，请使用 jQueries $(document).ready(function() {}) 或简写 $(function() {})为了那个原因。如果您有通过 AJAX 加载的内容，那也是另一回事，您需要寻找 事件委托

【解决方案2】：

这是纯HTML、CSS和JS的方法！希望对你有帮助！！

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>

[You can refer my code pen snippet to test!] 
> > https://codepen.io/blueKode/pen/abdZmYJ

【讨论】：

codepen 可以工作，但你能尝试在 Stack Overflows 本机代码 sn-p 中演示吗？
Rahul 我已经发布了代码 sn-p 希望对您有所帮助；！
看起来不错。我已经对你的答案投了赞成票，所以我无能为力了。由于这是一个古老的问题，这可能会受到关注。（我的任务是帮助你如何使用工具来改进你的答案）

【解决方案3】：

您可以将 classList.toggle() 与 .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>

这种方法适用于无限数量的按钮。

【讨论】：

OP 正在使用 jQuery，这只会在每次被点击时添加一个活动状态，并且在再次点击时也不会删除它。
现在它确实切换了类。当 vanilla JavaScript 完成这项工作时，为什么你更喜欢使用 jQuery？
既然 OP 已经在使用 jQuery，其二是他也已经在使用通畅的方法，这使您的 HTML 比您拥有的更灵活。假设您有更多元素必须在服务器端或 HTML 中添加 onclick，如果您在 JS 中执行此操作，则不必执行此操作，因为处理程序只侦听它必须绑定的类到。
很抱歉让您失望，但这不是一场比赛，事实是 OP 正在使用 jquery 而 jquery 只是有好处，所以你不必担心写普通的 JS 就像让它跨浏览器兼容一样。您的解决方案将完美运行，但更有可能出现故障并且编写更多代码（jQuery 口号：write less, do more）

【解决方案4】：

您可以使用 jQuery 的 toggleClass( className ) 函数。

http://api.jquery.com/toggleclass/

<script>
    $("button.btn").click(function() {
        $(this).toggleClass("active");
    });
</script>

<style>
    .active{
      // your active style
     }
<style>

【讨论】：

【解决方案5】：

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:active 现在发生的事情是它工作得很好 :-) 但你要求它做的事情和你希望它做的事情不是一回事。

我认为你需要修复你的 css 并将 active 定义为一个类而不是一个伪类（未经测试，但在这里）：

.active {
   background: #cecece;
}

【讨论】：

感谢您的回答，但这与 Sidney 在下面写的答案相同（而且他的速度更快），我仍然会点赞，谢谢 :)