JavaScript Elemente beim Klick anzeigen und ausblenden

8

Bitte entschuldigen Sie meine Ignoranz, ich habe keine Ahnung, was ich tue, aber ich versuche es.

Ich habe versucht, es durch Suchen herauszufinden, aber es hat nur ein funktionales Ergebnis in jQuery ergeben. Da dies ein so kleiner Abschnitt ist, denke ich, dass es besser wäre, einfach JavaScript zu verwenden, anstatt die gesamte jQuery-Bibliothek zu laden.

Weiß jemand wie / wenn ich die gleiche Funktionalität unten erreichen kann, aber nur mit normalem JavaScript ? Grundsätzlich versuche ich, wenn "butt1" angeklickt wird, die ungeordnete Liste "links" wird ausgeblendet und das div "box1" wird angezeigt:

%Vor%

Hier ist ein Link zum obigen Beispiel als Arbeitsbeispiel: Ссылка - das ist die Funktionalität, die ich replizieren möchte.

Mein ausgedehnter Dank an alle, die einen Moment brauchen ..: -)

    
Maurice 05.10.2011, 13:44
quelle

5 Antworten

16

Sie können getElementById verwenden, um ein Element mit id (entspricht $("#something") ) und getElementsByClassName auszuwählen, um Elemente basierend auf dem Klassennamen auszuwählen (entspricht $(".something") ), und Sie können die Option verwenden style -Eigenschaft zum Festlegen des display -Stils (entspricht der Methode jQuery .css ):

%Vor%

Beachten Sie jedoch, dass getElementsByClassName in älteren Versionen von IE nicht unterstützt wird, weshalb jQuery auch für kleine Dinge nützlich sein kann - es verkürzt den Code und bläst alle lästigen kleinen Browserunterschiede aus.

Ein weiterer wichtiger Unterschied zwischen dem obigen Code und Ihrer jQuery ist die Verwendung der Methode .live jQuery, die das DOM überwacht und das Ereignis an jedes Element anfügt, das dem Selektor entspricht, unabhängig davon, ob es bereits im DOM vorhanden war wird in der Zukunft hinzugefügt. Mit dem obigen Code, wenn es nicht bereits ein Element mit id "butt1" im DOM gibt, wenn der Code ausgeführt wird, erhalten Sie einen TypeError, weil getElementById null zurückgibt.

    
James Allardice 05.10.2011 13:49
quelle
4
%Vor%

Könnte werden:

%Vor%

Realistisch gesehen, macht das Laden von jQuery sehr viel Sinn, da Sie es von Google CDN aus tun. Viele Websites verwenden das, so dass es eine gute Wahrscheinlichkeit gibt, dass zumindest einige Ihrer Benutzer es bereits heruntergeladen haben. Außerdem ist jQuery komprimiert ein sehr kleiner Download. So sehr, dass die Lesbarkeit von jQuery-Stil-Code es wert ist.

    
Mike Thomsen 05.10.2011 13:52
quelle
1

Ok, während der einfachste Weg ist, es jQuery-Stil zu machen, können Sie diese Funktionalität immer noch in Javascript replizieren.

Der Schlüssel hier ist die Funktion getElementById , um das spezifische Element zu manipulieren, das Sie bearbeiten möchten, und dann legen Sie einfach die Eigenschaft element.style.display auf fest. none ', wenn Sie es ausblenden und ' blockieren 'möchten oder ' inline ', wenn Sie es anzeigen möchten (abhängig vom Kontext)

Hier ist mein Crack ...

%Vor%     
Eganr 05.10.2011 14:06
quelle
0

Die komprimierte Version von Jquery ist nur 31 KB groß. Laden Sie es über Ссылка hoch. Sie müssen die Benutzeroberfläche nicht laden, wenn Sie sie nicht benötigen. Die Menge an Code, um zu tun, was Sie wollen, ist nicht die Leichtigkeit in Jquery wert. Plus wie JamWaffles sagte, wenn es andere Orte gibt, an denen du Jquery benutzen wirst, dann lade es einfach und benutze es.

    
lumberjacked 05.10.2011 13:54
quelle
0

Dies bedeutet, dass Sie nur eine Box haben

%Vor%     
megakorre 05.10.2011 13:56
quelle

Tags und Links