Hallo,
ich wollte mir gerade nach dieser Anleitung (Ulkit) https://getuikit.com/docs/switcher#switcher-and-button
einen Switcher mit 2 Buttons auf einer Seite einfügen. Momentan noch lokal. Selbiges Problem aber nach einem Schnelltest auch online
Folgenden Code habe ich im Beitrag eingefügt:
<div uk-switcher="animation: uk-animation-fade; toggle: > *">
<button class="uk-button uk-button-default" type="button">Button1</button>
<button class="uk-button uk-button-default" type="button">Button2</button>
</div>
<ul class="uk-switcher uk-margin">
<li>Inhalt1</li>
<li>Inhalt2</li>
</ul>
Die beiden Buttons werden angezeigt, die Animation funktioniert und ich kann sie anklicken. Doch bleiben die Inhalte unsichtbar, weil class="uk-active" dem jeweiligen <li> nicht hinzugefügt wird, wenn ein Button angeklickt wird. So habe ich es jedenfalls auf anderen Webseiten im Web ausfindig machen können.
Stattdessen finde ich folgendes im Quellcode: .uk-switcher > not(.uk-active) {display: none;}
Das wird scheinbar auf beide <li> angewandt. Nehme ich das im Firefox-Inspektor raus, dann werden beide Inhalte angezeigt.
Wie kann ich erreichen, dass der Text für den aktiven Button angezeigt wird? Wo ist mein Denkfehler?
EDIT: Ich kann mir nicht vorstellen, dass ich das "uk-active" selber per IF-Anweisung da einbauen muss, oder?