按鈕：使用 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