it-swarm.com.de

So bleiben Sie: aktiver CSS-Stil nach Klicken auf eine Schaltfläche

Sobald der Button angeklickt ist, möchte ich, dass er beim aktiven Stil bleibt, anstatt zum normalen Stil zurückzukehren. Kann das bitte mit CSS gemacht werden? Ich benutze den Blurb-Button aus dem DIVI Theme (WordPress). Bitte hilf mir!

code: 

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:hover {
       color: red !important; }

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:selected {
  background-color: #ff4b46;
  color: #fff; }

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:active {
    color: white !important;
   background-color: red; 
    width: 140px;
    height: 100px; }
24
Dereck

CSS

:active gibt den Interaktionsstatus an (daher wird eine Taste beim Drücken angewendet), :focus könnte hier die bessere Wahl sein. Das Styling geht jedoch verloren, wenn ein anderes Element den Fokus erhält.

Die letzte mögliche Alternative bei der Verwendung von CSS wäre :target, vorausgesetzt, dass die angeklickten Elemente Routen (z. B. Anker) innerhalb der Seite festlegen. Dies kann jedoch unterbrochen werden, wenn Sie ein Routing (z. B. Angular) verwenden. Dies scheint jedoch hier nicht der Fall zu sein .

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>

Javascript/jQuery

Daher gibt es in CSS keine Möglichkeit, absolut einen Stilzustand umzuschalten. Wenn keine der oben genannten Aufgaben für Sie funktioniert, müssen Sie entweder eine Änderung in Ihrem HTML-Code (z. B. aufgrund eines Kontrollkästchens) oder programmatisch vornehmen eine Klasse anwenden/entfernen, z jQuery

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});
button.selected{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Item</button><button>Item</button><button>Item</button>
  

41
SW4

In der Divi Theme-Dokumentation heißt es, dass das Theme Zugriff auf 'ePanel' hat, das auch einen Abschnitt 'Integration' enthält.

Sie sollten diesen Code hinzufügen können:

<script>
 $( ".et-pb-icon" ).click(function() {
 $( this ).toggleClass( "active" );
 });
</script>

klicken Sie in das Feld "Hinzufügen von Code zum Kopf Ihres Blogs" auf der Registerkarte "Integration", wodurch die jQuery zum Laufen gebracht werden soll.

Dann sollten Sie in der Lage sein, Ihre Klasse so zu gestalten, wie Sie es brauchen. 

1
GKB

ICH HABE ES HERAUSGEFUNDEN. EINFACH, EFFEKTIV KEIN JQUERY

Wir werden ein verstecktes Kontrollkästchen verwenden.
Dieses Beispiel beinhaltet einen "beim Klicken - 'Hover/Aktiv'-Zustand".

-

Um Inhalte selbst anklickbar zu machen:

HTML

<input type="checkbox" id="activate-div">
  <label for="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>
  </label>

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}



So ändern Sie den Inhalt der Schaltfläche:

HTML

<input type="checkbox" id="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>

<label for="activate-div">
   //MY BUTTON STUFF
</label>

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

Ich hoffe es hilft!!

1
Aaron Fitch

Obwohl diese Frage schon vor langer Zeit gestellt wurde, möchte ich meine eigene Antwort meines Falles lassen, weil Frontend sich schnell entwickelt. Ich baue eine App in vuejs und hatte den gleichen Bedarf an einer aktiven Klasse Klicken Sie auf die Schaltfläche. Ich habe 3 Tasten und 2 Auswahlmöglichkeiten. Wenn auf eine der drei Schaltflächen am Anfang geklickt wird, ist sie aktiv. Wenn Sie jedoch auf die Auswahloption klicken, wird diese ausgeblendet. Außerdem brauchte ich die All-Schaltfläche, um aktiv zu sein, wenn die Vorlage bereitgestellt (kompiliert) wird.

 enter image description here

Hier habe ich die Antworten oben und im Internet verwendet. Ich fügte die Klassen btn--week, btn--month und btn--all hinzu.

<div class="btn-group">
          <button
            type="button"
            class="btn btn-md light btn--week"
            v-on:change="latestType = 'week'"
          >Week</button>
          <button
            type="button"
            class="btn btn-md light btn--month"
            v-on:change="latestType = 'month'"
          >Month</button>
          <button
            type="button"
            class="btn btn-md light btn--all"
            v-on:change="latestType = ''"
          >All</button>
        </div>

In meiner Methodenoption von vuejs script:

methods:{
 toggleButtonActiveClass() {
      // TODO: add and remove class when one is added
      $(".btn--week").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--month").click(function() {
        $(".btn--week").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--all").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--week").removeClass("active");
        $(this).toggleClass("active");
      });
    }
}

und im gemounteten Lebenszyklus:

 mounted() {
    this.toggleButtonActiveClass();
    $(".btn--all").toggleClass("active"); //to keep all button active when template created
  }

Ich weiß, dass dies kein perfekter Code-Stil ist, aber es hat für mich funktioniert. Ich hoffe es hilft jemandem in der Zukunft.

0