CSS / Javascript Zeige / Verstecke DIV mit einer CSS-Klasse?

7

Ich habe gegoogelt und viele Scripts zum Ausblenden und Anzeigen von DIV-Inhalten gefunden, als einen Schalter beim Klicken auf die Schaltfläche.

Aber sie arbeiten mit IDs.

Ich würde gerne dasselbe machen, ABER ich möchte statt einer ID eine Klasse verwenden, so dass wenn ich 20 DIVs haben möchte, die umschalten ... Ausblenden / anzeigen Ich muss keinen zusätzlichen Code hinzufügen.

Hier ist ein Code:

%Vor%

Kann mir bitte jemand helfen?

Danke

    
Satch3000 29.04.2011, 19:51
quelle

7 Antworten

14

Ist Jquery eine Option? Hoffentlich so, denn das macht was du willst:

Ссылка

%Vor%     
dpb 29.04.2011, 19:53
quelle
4

Die meisten der jQuery-Antworten sollten ziemlich einfach sein, aber wenn Sie Ihr Beispiel in regulärem JS sehen, können Sie es in JS tun.

Mögliche Nachteile: Browser, die getElementsByTagName nicht unterstützen. Ich habe IE7 getestet und es funktioniert, aber ich bin mir nicht sicher, niedriger.

%Vor%

Probieren Sie es aus: Ссылка

    
Robert 29.04.2011 20:02
quelle
4

Wie andere bereits mehrmals gesagt haben, ist dies in jQuery mit einem jquery-Selektor und der .hide-Methode einfach. Da Sie jedoch in einem allgemeinen Sinn fragen, und es ist eine gute Idee zu wissen, wie es ohne einen Rahmen zu tun ist, ist das keine vollständige Antwort.

Hier sind Ihre Optionen:

  1. JQuery-Methode Verwenden Sie einfach jQuery-Selektoren und die .hide () -Methode.

    $ (". CLASSNAME"). hide ()

  2. Vanille JS: Dynamisches CSS. Ein Ansatz besteht darin, Stylesheets dynamisch an den Dokumentenkopf anzuhängen - Sie können CSS-Klassenattribute mit ändern Javascript?

  3. Vanilla JS: CSS direkt ändern:

    %Vor%
slifty 29.04.2011 20:08
quelle
2

Wäre das nicht einfach

? %Vor%

Oder gruppieren Sie alle Elemente, die Sie in einem Container-div verbergen möchten, und blenden Sie dieses div aus.

    
slandau 29.04.2011 19:52
quelle
2

Verwenden von jQuery:

%Vor%

Dabei ist classname der Name der Klasse.

    
Matthias 29.04.2011 19:53
quelle
1

Sie könnten einfach $(".className").hide();

verwenden

Das $(".somthing") macht dasselbe wie $("#somthing") , außer dass es für eine Klasse statt für eine ID ist.

    
Mash 29.04.2011 19:56
quelle
1

Mit jQuery Selektoren können Sie eine ID finden mit:

%Vor%

Das Ändern von Klassen zum Auswählen von Klassen ist trivial:

%Vor%

Ohne jQuery zu verwenden, ist es ein bisschen mehr nicht-trivial, aber Sie können diese SO Frage für einige Hilfe überprüfen:

Wie GetElementByClass anstelle von GetElementById mit Javascript?

    
Jeff Lambert 29.04.2011 19:54
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie erhalte ich das Dateierstellungsdatum unter Linux?