Zum ein-oder ausblenden div auf Klick in HTML

Habe ich vier HTML - div ich will, um zu zeigen und verstecken Sie auf klicken Sie auf, wie Sie dies tun 

            <div id="targetid" class="image_one"><img src="image/imageone.png"/></div>
            <div id ="targetidone "class="image_two"><img src="image/imagetwo.png"/></div>
            <div id="targetidtwo" class="image_one_one"><img src="image/pagetwo_graph_two_11.png"/></div>
            <div id ="targetidfour"class="image_two_two"><img src="image/pagetwo_graph_two_22.png"/></div>

unten sind die zwei div auf die nach der klicken Sie auf das obige Bild sollte ein-und ausblenden 

          <div class="option_image"><img src="image/option_1.png"/></div>

          <div class="option_image_one"><img src="image/option_1.png"/></div>
  • Es heißt "div"
  • ich denke also, wenn Sie wissen, andere bitte sagen
  • Wenn Sie bei google eine Suche, die Sie gefunden hätten, über 1 mil. Beispiele, wie dies zu tun. Ich werde die Abstimmung in dieser Frage unten.
  • Ratet mal, was das erste suchergebnis ist, wenn man beim googeln nach "html anzeigen ausblenden div'...
  • Lassen Sie mich quess.....dieser Beitrag? 🙂
  • Yup. Es ist ein bisschen befremdlich, trifft die erste Folge und erreichen einen post mit -4 Stimmen. Ich verstehe die original-downvoting auf die schlampig schreiben und die Faulheit des OP, aber vielleicht könnte man überdenken. Die post ist in ziemlich guter Form jetzt, und zusammen mit den Antworten, die es wirklich Wert.
  • kein problem, ich entfernte mein downvote!

InformationsquelleAutor Jackson J | 2012-04-19
  1. 3
    $("buttonid").click(function () {
$("divid").toggle();
});

    Buttonid - Id der Schaltfläche, die Sie klicken
    divid - Id des div, die Sie brauchen, um ein - /ausblenden

    Hinweis:fügen Sie die jquery-Skript

    • ich Verstand nicht, können Sie ein wenig beschreiben, wie mein code gezeigt
    • Die Verwendung einer ID in einem jQuery-Selektor es muss vorangestellt werden, ein hash: $("#buttonid") etc
    • Ich habe bearbeitet die Antwort mit einem link, aber hier ist es wieder: jQuery tutorial
    • Präfix ist nicht in allen Fällen erforderlich.
    • Fügen Sie id-Tags zu Ihrem Bild divs, rufen Sie einen gemeinsamen js-Funktion sagen "togglediv", machen Sie es sich einfach durch die übergabe der div-id, die sollte angezeigt werden/versteckt als parameter an die "togglediv" - Funktion, Nun fügen Sie den parameter im code $(@param).toggle();
    • richtig, aber auch das weglassen der hash-würde bedeuten, die Auswahl basiert auf einem tag-Namen und nicht ID

    InformationsquelleAutor Thiliban
  2. 4

    Wenn Sie keine 3rd-party-javascript (z.B. jQuery), dann benutzen Sie es:

    document.getElementById('target-id').style.display = 'none'; //hide it
document.getElementById('target-id').style.display = 'block'; //show it (for block element, eg: div)
document.getElementById('target-id').style.display = 'inline'; //show it (for inline element, eg: span)

    Beispiel (1):

    <div id="target-id">hello workd</div> <!-- attribute: id -->
<a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">hide it</a> 
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">show it</a>

    Beispiel (2):

    <div id="targetid" class="image_one" onclick="document.getElementById('targetid').style.display = 'none';"><img src="image/imageone.png"/></div> <!-- adding onclick to hide this element when you click it -->

<div class="option_image" onclick="document.getElementById('targetid').style.display = 'block';"><img src="image/option_1.png"/></div> <!-- adding onclick to show element #targetid when you click this -->
    • ich möchte, dass beim laden der Seite firt zwei dic angezeigt werden sollen und wenn ich auf den button klicken zweite div-Element geöffnet werden ich habe Ihren code eingefügt aber funktioniert nicht
    • Nur hinzufügen mein code oben nicht funktioniert. Benötigen Sie id="etwas" in der Ziel-Elemente (die Elemente zum ein - /ausblenden). Und stellen Sie sicher, dass es einzigartig ist (keine anderen Elemente haben die gleiche id). Danach legen Sie die onclick="..." in Ihre trigger-Elemente (Elemente, die, wenn Sie auf ihn klicken, wird ein - /ausblenden des target-elements). Und es wird einfacher sein, wenn Sie 3rd-party-Bibliothek, z.B. jQuery.
    • ja, aber ich habe auch Hinzugefügt meine ich bin Entsendung in meinem code
    • ich habe editiert code jetzt prüfen
    • Siehe Beispiel (2). Ich habe einige onclick aus dem code. Sie können erweitern, es für Ihre Zwecke.
    InformationsquelleAutor Muhammad Alvin
  3. 0

    Als muhhamad alvin hat geschrieben, Sie können umkehren möchten, wie die Dinge dargestellt werden. So, tweaking seine Lösung gab mir dieses Ergebnis:

    Wie es funktioniert?

    -Klicken Sie auf Frage, um eine Antwort, klicken Sie auf Antwort ausblenden die Antwort (die Frage ist immer angezeigt). So, ersetzen Sie einfach die Frage und Antwort mit Ihren eigenen divs.

    HTML:

        <a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">Question</a>
<div id="target-id" style="display: none;"><a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">Answer</a> </div> <!-- attribute: id -->

    Edit: Das, was zu beachten ist, dass für jede Frage/Antwort-paar, Sie brauchen ein anderes "Ziel-id".

    InformationsquelleAutor Damir Olejar
  4. -1

    können Sie versuchen, diese:

    $(".image_one").toggle();

    den obigen code schnappen Sie sich das element mit dem Namen der Klasse.
    wenn Sie nicht über eine Klasse gibt,können Sie durch die id nur so:

    $("#image_one").toggle();

    hoffe, dass dies nützlich

    • durch Umschalten wird es zu verbergen
    • verstecken und zeigen.
    • Autor gebeten, zu verbergen, KLICKEN Sie AUF plus - es ist schlimmer-version des bereits akzeptierten Antworten veröffentlicht mehr als 15 Minuten vor Ihnen.
    InformationsquelleAutor Pangeran Oby
Schreibe einen Kommentar