Schaltfläche: Aktiv mit JavaScript und CSS

Der Versuch, eine einfache Schaltfläche in einem aktiven, anderen Stil zu machen, wenn darauf geklickt wird. Ich benutze HTML, um den Button auszulegen, CSS für das Styling und hoffe, ein bisschen JavaScript dafür zu verwenden.Schaltfläche: Aktiv mit JavaScript und CSS

Nachdem Sie sich SO angesehen haben und feststellen, dass es viele verschiedene Möglichkeiten gibt, wie die Verwendung von Checkbox, um einen Button mit reinem CSS oder jQuery oder JavaScript zu erstellen, habe ich das Gefühl, dass JavaScript der naheliegendste Weg ist.

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') 
    } 
});

Hier ist ein jsfiddle Link: http://jsfiddle.net/w5h6rffo/

Ad itional Hinweis
Merkmal Ziel ist es, mehrere Schaltflächen mit der gleichen Klasse, aber jede Schaltfläche zu einer anderen Funktionen aufrufen. Ich habe die Berufung der Funktionen arbeiten, nur nicht die Taste am einen aktiven Zustand zu bleiben, wenn es zuerst gedrückt wird, dann in einem inaktiven Zustand, wenn sie erneut gedrückt wird

Quelle

2015-12-09 axchink

Sie sind in der Nähe, es richtig zu tun, wobei der Mechanismus einen Scheck gebaut, um zu sehen, ob Ihr Element hat die active Klasse ist schön, aber jQuery hat eine toggleClass() Funktion, die Sie gerade erlaubt schreiben Sie die folgenden Schritte aus:

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

Dann in Ihrem CSS, anstatt die psuedo von Styling :active Sie stattdessen einen Klassennamen wie diese verwenden werden:

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

~~Sie wollen auch die :active Wähler aus Ihrem CSS alltogether zu entfernen, da Sie es nicht mehr benötigen werden~~ :)

Wie dfsq wies darauf hin, ein gewisser Wert ist die :active in Halte psuedo selector:

Ich denke nur, dass der aktive Zustand (: aktiv) für die Steuerelemente wichtig ist.Zum Beispiel ohne Schaltfläche wird die gleiche aussehen, wenn es gedrückt wird, aber nicht geklickt (Mouseout vor MouseUp). UX ist leicht besser mit: aktiv. ~~Aber vielleicht bin ich zu pingelig~~

Aus diesem Grund möchten Sie vielleicht den Wähler ändern zu sein:

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

Da dies beeinflussen sowohl die .active und den :active Zustand.

Quelle

2015-12-09 18:55:42 SidOfc

* "Sie werden auch die entfernende: aktive Wähler von CSS Alles zusammen, da Sie es nicht mehr brauchen werden "*. Nein, es ** ist ** eigentlich noch nötig. Beide, active und active, werden benötigt. Der Effekt ist schöner. – dfsq

oh! Deine Antwort schlägt meine um ungefähr 40 Sekunden. – David

@dfsq Es ist absolut nicht erforderlich, es wird nur abweichen, wenn der Benutzer Tab-basierte Navigation statt einer Maus verwendet, wie für den Effekt, es sieht nicht schöner, sondern ** genau das gleiche ** so * ja, Sie __can__ den ': active' Selektor entfernen * – SidOfc

Sie könnten classList.toggle() verwenden, in Verbindung mit einer .active-Klasse.

So würde der Code wie folgt aussehen:

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

Diese aproach würde für eine unendliche Anzahl von Tasten arbeiten.

Quelle

2015-12-09 18:49:33

die OP jQuery verwendet, das nur einen aktiven Zustand hinzufügt ** Jedes Mal ** wird es angeklickt und entfernt es auch nicht, wenn erneut darauf geklickt wird. – SidOfc

Jetzt schaltet es die Klasse um. Und warum würden Sie lieber jQuery verwenden, wenn Vanilla JavaScript die Aufgabe erfüllt? –

Da das OP jQuery bereits für eins verwendet, ist das zweite, dass er auch bereits den Unblocking-Ansatz verwendet, der Ihren HTML-Code viel flexibler macht als Sie. Angenommen, Sie haben viel mehr Elemente, müssen Sie den onclick auf der Serverseite oder im HTML hinzufügen, wenn Sie dies in JS tun, müssen Sie dies nicht tun, da der Handler nur eine Klasse hört, die er binden muss zu. – SidOfc

Sie können von jQuery toggleClass (Klassenname) Funktion verwenden.

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

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

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

Quelle

2015-12-09 18:54:40

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/:active Was jetzt passiert ist, dass es funktioniert gut :-) aber was Sie es zu tun und was Sie tun wollen, sind nicht das Gleiche.

Ich glaube, Sie brauchen Ihre CSS zu beheben und active als eine Klasse zu definieren, anstatt eine Pseudo-Klasse (nicht getestet, aber hier geht):

.active { 
    background: #cecece; 
}

Quelle

2015-12-09 18:56:23 David

@dfsq suchen, Sie haben Recht, meinen Kommentar zu entfernen. – SidOfc

Vielen Dank für Ihre Antwort, aber dies ist die gleiche Antwort, die Sidney unten geschrieben hat (und seine war schneller), ich werde immer noch die upvote drücken, danke :) – axchink

Schaltfläche: Aktiv mit JavaScript und CSS

Antwort

Verwandte Themen