Ergebnis 1 bis 4 von 4

Thema: Div per Script eine CSS Klasse zuweisen

  1. #1
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard Div per Script eine CSS Klasse zuweisen

    Hallo,

    wahrscheinlich findet Ihr das etwas banal, aber ich suche einen einfachen Code mit dem ich einem bestimmten DIV eine CSS Klasse zuweisen kann, dieses sollte dirch einen Klick auf einen Button geschehen.

    Beispiel:
    Wenn der Button mit der #="btnFormat" die class="isActive" hat, soll der DiV mit der #="image" die class="move" bekommen, wird die class="isActive" bei dem Button wieder entfernt, soll auch die class="move" wieder aus dem DIV genommen werden.

    Da ich mit jquery und co. mich leider überhaupt nicht auskenne, habe ich selbstverständlich bevor ich das hier gepostet habe, Google bemüth. Dort ist leider aber so etwas einfaches als Codeschnippsel nicht zu finden.
    Deshalb würde ich mich freuen wenn mir hier aus dem Forum jemand weiterhelfen könnte.

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.751
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich hoffe ich habe Dich richtig verstanden.
    Du möchtest, dass bei Klick auf dem Button mit der id "btnformat" dieser die Klasse "isActiv" bekommt und gleichzeitig soll ein div mit der id "image" die Klasse "move" bekommen und beim nächsten Klich sollen die Klassen wieder entfernt werden.
    Ich versuche es mal, bin ja in diesem Bereich auch nicht so ganz zu Hause. Meine Lösung wäre
    Code:
    (function($) {
      $(document).ready(function() {
        // resets
          $('#btnFormat').removeClass('isActive');
          $('#image').removeClass('move');
             // Klassen wechseln
          var toggleClasses = function() {
            $('#btnFormat').toggleClass('isActive');
            $('#image').toggleClass('move');
          }
          // Toogle Klassen
                $('#btnFormat').click(function(e) {
    e.preventDefault();
    toggleClasses(); }); }); })(jQuery);
    Edit: Ob der Reset wirklich nötig ist, weiss ich nicht zu 100%. Ist so eine alte Angewohnheit aus alten Fortranzeiten immer definierte Anfangszustände zu haben.
    Geändert von mlweb (23.02.2018 um 18:12 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.943

    Standard

    Ich denke, es fehlt noch das hier:

    [QUOTE=Supermann;466151
    wird die class="isActive" bei dem Button wieder entfernt, soll auch die class="move" wieder aus dem DIV genommen werden.
    [/QUOTE]

    Hier stellt sich für mich die Frage, wodurch die "isActive" beim Button entfernt wird, d.h. auf welches Ereignis man reagieren muss.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  4. #4
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.751
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich bin mal davon ausgegangen, dass das jeweils per Klick auf den Button passieren soll, deshalb das "toggleClass".

    Sonst müsste man natürlich erst mal wissen wie das "isActive" entfernt werden soll um dann entsprechend zwei Ereignisse zu verarbeiten.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •