web-dev-qa-db-ja.com

ボタン：JavaScriptとCSSを使用してアクティブ

クリックしたときに、シンプルなボタンをアクティブな別のスタイルにしようとしています。私はHTMLを使用してボタンのレイアウトを設定し、CSSをスタイル設定に使用しており、JavaScriptを少し使用してそのようにしたいと考えています。

SOを見回して、チェックボックスを使用して純粋な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/

追記
機能の目標は、同じクラスを持つ複数のボタンを持つことですが、各ボタンは異なる機能を呼び出します。私は機能の呼び出しを機能させていますが、ボタンが最初に押されたときにボタンがアクティブな状態のままではなく、もう一度押したときに非アクティブな状態になります

javascripthtmlcssbutton
6
axchink

あなたはそれを正しく行うことに近づいています。要素にactiveクラスがあるかどうかを確認するためにチェックを使用して構築したメカニズムは素晴らしいですが、jQueryには toggleClass() があります以下を書くだけの関数：

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

次に、CSSで、psuedo :activeをスタイリングする代わりに、次のようにクラス名を使用します。

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

また、必要がなくなるため、CSSから:activeセレクターをすべて削除することもできます。 :)

dfsq が指摘したように、:active疑似セレクタを保持することには特定の値があります。

コントロール要素のアクティブ状態（：active）が重要だと思います。たとえば、ボタンが押されていてもクリックされていない場合（マウスアップの前にマウスアウト）、ボタンがないと同じように見えます。 UXは、：activeの方が少し優れています。 でも私はうるさすぎる

このため、セレクターを次のように変更することができます。

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

これは.activeと:activeの両方の状態に影響するためです。

6
SidOfc

.activeクラスと組み合わせてclassList.toggle（）を使用できます。

したがって、コードは次のようになります。

<!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>

このアプローチは、無数のボタンに対して機能します。

4
Paul B.

を参照してくださいhttps://developer.mozilla.org/en-US/docs/Web/CSS/:active :-)しかし、あなたがそれをするように求めていることとあなたがそれをしたいことは同じではありません。

私はあなたのCSSを修正し、activeを疑似クラスではなくクラスとして定義する必要があると思います（テストされていませんが、ここにあります）：

.active {
   background: #cecece;
}
3
David

JQueryのtoggleClass（className）関数を使用できます。

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

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

<style>
    .active{
      // your active style
     }
<style>
1
Swarnendu Paul