[JavaScript] An Element Klasse hinzufügen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von SidDasFaultier, 27. November 2012 .

  1. 27. November 2012
    An Element Klasse hinzufügen

    Guten Morgen Rush'ler,

    ich möchte folgendes kleine Script umsetzten:

    Wenn dieses Element
    Code:
    #sidebox96 ul.categories li ul li
    die Klasse "active" besitzt, soll dieses Element
    Code:
    #sidebox96 ul.categories li
    auch die Klasse "active" erhalten.
    Ich möchte quasi damit dem Elternelement dieselbe Klasse verpassen.

    Ich hab gelesen dass das mit "addclass" funktionieren soll.
    Kann mir das jemand an einem Beispiel erläutern?

    Greetz!
     
  2. 27. November 2012
    AW: An Element Klasse hinzufügen

    [g]javascript listen to css change class[/g] (vlt nicht die besten Keywords) hat mir folgenden Link ausgespuckt: jQuery - Fire event if CSS class changed - Stack Overflow

    Das Erfahren, wenn die Klasse geändert wird, ist wohl die größte Hürde. addClass und removeClass sind sehr simpel, egal ob du mit jQuery oder einer anderen Bibliothek arbeitest
     
    1 Person gefällt das.
  3. 27. November 2012
    Zuletzt bearbeitet: 27. November 2012
    AW: An Element Klasse hinzufügen

    Wenn du jQuery einsetzt, dann sollte dies funktionieren.

    HTML:
    $target = $('#sidebox96 ul.categories li ul li.active'); // Eine Referenz für das Element festlegen
    
    $target.parents('li').addClass('active'); // Das nächste Eltern-Element das ein "li" sein soll suchen und die Class "active" hinzufügen
    
    //..
     
  4. 27. November 2012
    Zuletzt bearbeitet: 27. November 2012
    AW: An Element Klasse hinzufügen

    Danke für eure Antworten!

    Das Element
    Code:
    #sidebox96 ul.categories li ul li
    hat ja schon die Klasse "active" also benötige ich diesen Teil
    Code:
    $target.addClass( 'active' ); // Dem Element die Class "active geben
    doch nicht?

    Also sieht mein Script dann so aus:
    Code:
    <script type="text/javascript" language="JavaScript">
    $target = $('#sidebox96 ul.categories li ul li'); // Eine Referenz für das Element festlegen
    $target.parents('li').addClass('active'); // Das nächste Eltern-Element das ein "li" sein soll suchen und die Class "active" hinzufügen
    </script>
    
    Funktioniert auch fast alles...nur jetzt hängt es an jedem li-Elternelement die Klasse "active" an...ich möchte aber nur bei dem einen Elternelement (bei dem #sidebox96 ul.categories li ul li.active als Kind ist) diesen Effekt.


    EDIT:
    Habs gelöst!
    Ich musste einfach bei der Referenz die du anfangs definiert hast ".active" anhängen...also so:

    Code:
    $target = $('#sidebox96 ul.categories li ul li.active'); // Eine Referenz für das Element festlegen
    $target.parents('li').addClass('active'); // Das nächste Eltern-Element das ein "li" sein soll suchen und die Class "active" hinzufügen
    
    und schon macht das Script das nur für das eine Element!

    Danke!
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.