Question

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

附加说明
功能目标是让多个按钮具有相同的类，但每个按钮调用不同的功能。我已经调用了这些功能，而不是第一次按下时 处于活动状态的按钮，然后再次按下时处于非活动状态

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）是重要。例如，没有它按钮看起来是相同的按下但未点击（鼠标前鼠标输出）。用户体验稍微有点更好的：活跃。 ~~但也许我太挑剔了~~

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

.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 个答案: