按钮：使用 JavaScript 和 CSS 激活

Question

试图使一个简单的按钮在单击时处于活动的、不同的样式。 我使用 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/

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

Answer 1

你已经接近做对了，你使用检查来查看元素是否具有active类的机制很好，但 jQuery 有一个toggleClass()函数，它允许你只编写以下内容：

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

然后在您的 CSS 中，您将使用类名代替伪:active样式，如下所示：

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

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

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

我只是认为控制元素的活动状态 (:active) 很重要。 例如，如果没有它按钮被按下但没有被点击（mouseout before mouseup）看起来是一样的。 使用 :active 时 UX 稍微好一些。 ~~但也许我太挑剔了~~

出于这个原因，您可能希望将选择器修改为：

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

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

Answer 2

您可以将 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>

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

Answer 3

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:active现在发生的事情是它运行良好:-) 但是你要求它做什么以及你想要它做什么做的不是一回事。

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

.active {
   background: #cecece;
}

Answer 4

这是纯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

Answer 5

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

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

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

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

按钮：使用 JavaScript 和 CSS 激活

问题描述

5 个解决方案

解决方案1
7 已采纳 2015-12-09 18:55:42

解决方案2
4 2015-12-09 18:49:33

解决方案3
4 2015-12-09 18:56:23

解决方案4
2 2020-06-13 15:15:53

解决方案5
1 2015-12-09 18:54:40

按钮：使用 JavaScript 和 CSS 激活

问题描述

5 个解决方案

解决方案1 7 已采纳 2015-12-09 18:55:42

解决方案2 4 2015-12-09 18:49:33

解决方案3 4 2015-12-09 18:56:23

解决方案4 2 2020-06-13 15:15:53

解决方案5 1 2015-12-09 18:54:40

解决方案1
7 已采纳 2015-12-09 18:55:42

解决方案2
4 2015-12-09 18:49:33

解决方案3
4 2015-12-09 18:56:23

解决方案4
2 2020-06-13 15:15:53

解决方案5
1 2015-12-09 18:54:40