it-swarm.com.de

Schaltfläche: Aktiv mit JavaScript und CSS

Der Versuch, eine einfache Schaltfläche so zu gestalten, dass sie sich in einem aktiven, anderen Stil befindet, wenn darauf geklickt wird. Ich benutze HTML, um die Schaltfläche zu gestalten, CSS für das Styling und hoffe, dass ich dazu ein bisschen JavaScript verwenden kann.

Nachdem Sie sich in SO umgesehen haben und herausgefunden haben, dass es viele verschiedene Möglichkeiten gibt, z. B. die Verwendung von Checkbox, um eine Schaltfläche mit reinem CSS oder jQuery oder JavaScript zu erstellen, denke ich, dass JavaScript die engste Art ist, die ich mir anschaue.

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/

Zusätzliche Anmerkung
Das Ziel der Funktion besteht darin, mehrere Schaltflächen mit derselben Klasse zu haben, wobei jedoch jede Schaltfläche eine andere Funktion aufruft. Ich habe den Aufruf der Funktionen, aber nicht die Taste bleibt bei ein aktiver Zustand, wenn sie zuerst gedrückt wird, dann in einem inaktiven Zustand, wenn sie erneut gedrückt wird. 

6
axchink

Sie sind kurz davor, es richtig zu machen. Der Mechanismus, den Sie mithilfe einer Prüfung erstellt haben, um zu sehen, ob Ihr Element die Klasse active hat, ist Nice, aber jQuery hat eine Funktion toggleClass() , mit der Sie Folgendes schreiben können:

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

Dann verwenden Sie in Ihrem CSS anstelle des Pseudo-Codes :active einen Klassennamen anstatt wie folgt:

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

Sie sollten auch den :active-Selektor aus Ihrem CSS entfernen, da Sie ihn nicht mehr benötigen :)

Wie dfsq darauf hingewiesen wird, gibt es einen bestimmten Wert beim Beibehalten des :active psuedo-Selektors:

Ich denke nur, dass der aktive Zustand (: aktiv) für die Steuerelemente .__ ist. wichtig. Zum Beispiel sieht die Schaltfläche ohne dasselbe aus, wenn sie .__ ist. gedrückt, aber nicht angeklickt (mouseout vor mouseup). UX ist etwas besser mit: aktiv. Aber vielleicht bin ich zu wählerisch

Aus diesem Grund möchten Sie möglicherweise den Selektor wie folgt ändern:

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

Da dies sowohl den .active- als auch den :active-Zustand beeinflusst.

6
SidOfc

Sie können classList.toggle () zusammen mit einer .active-Klasse verwenden.

Ihr Code würde also ungefähr so ​​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>

Dieser Ansatz würde für eine unendliche Anzahl von Tasten funktionieren.

4
Paul B.

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/:active Was jetzt passiert, ist, dass es gut funktioniert :-), aber was soll man damit machen und was Sie möchten, dass es nicht dasselbe ist.

Ich denke, Sie müssen Ihre CSS korrigieren und active als Klasse und nicht als Pseudo-Klasse definieren (ungeprüft, aber hier gilt):

.active {
   background: #cecece;
}
3
David

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

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

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

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