Announcement

Collapse
No announcement yet.

divs Ein- und ausblenden

Collapse
X
Collapse
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    divs Ein- und ausblenden

    Hallo, ich habe ein Dropdown-Menü und ich möchte je nach Auswahl das selektierte div einblenden und die anderen 2 ausblenden.
    Hier ist der Code soweit:
    Code:
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="dropdown" id="dropdown" onchange="berechne()" >
        <option value="">Auswahl</option>
        <option value="1">div1</option>
        <option value="2">div2</option>
        <option value="3">div3</option>
        </select>
        <div id="div1">
            <p>Das ist div1.</p>
        </div>
        <div id="div1">
            <p>Das ist div2.</p>
        </div>
        <div id="div3">
            <p>Das ist div3.</p>
        </div>
</body>
    Danke Walter
    Tags: None
  • #2
    Mittels jquery
    https://jquery.com/

    https://api.jquery.com/fadein/
    Christian

    Comment

    • #3
      Ist zwar gut gemeint, aber diese Antwort hilft mir als Anfänger gar nichts.

      Comment

      • #4
        https://justpaste.it/62lzs


        Warum hilft dir das nicht?
        Lade dir jquery runter, binde das Javascript ein, nutze die Funktion

        Runterladen wirst du noch können?
        script src="jquery.js" type="text/javascript"
        (ohne die Tags, da die hier nicht genommen werden)
        bindet das Script ein, wenn die Datei im gleichen Ordner liegt wie die HTML-Datei
        $("#div1").fadeIn(1500);
        blendet ein...im onselect des dropdown

        Wenn Auswahl==1
        $("#div1").fadeIn(1500);
        sonst wenn Auswahl==2
        $("#div2").fadeIn(1500);
        sonst wenn Auswahl==3
        $("#div3").fadeIn(1500);

        Ggf.die anderen vorher ausblenden
        $("#divx").fadeOut("fast");


        Auch ein Anfänger kann sich mal eine Seite durchlesen.....


        Siehe
        https://www.w3schools.com/js/default.asp
        Zuletzt editiert von Christian Marquardt; 29.07.2021, 15:16.
        Christian

        Comment

        • #5
          Ich denke auch, dass man jquery für sowas nicht benötigt.
          Allerdings würde ich es etwas kürzer, aber skalierbarer halten, in etwa so: https://codepen.io/PHProcks/pen/ZEKjJwQ?editors=1010

          Kommt ein DIV dazu braucht man nur das DIV selber und eine Option in das Select zufügen, der Rest passt dann automatisch.

          Geht es um die smoothe Einblendung, wie Christian Marquardt es im jQuery Beispiel gezeigt hat, bedarf es lediglich ein wenig CSS, um das auch nativ hinzubekommen.
          PHP rocks!
          Eine Initiative der PHP Community

          Comment

          • #6
            jQuery war vor 5 Jahren durchaus hilfreich, aber mittlerweile unterstützt jeder moderne Browser die fetch API für Ajax und document.querySelector für Elemente mit "jQuery Style" auf der Seite zu suchen.
            Ich würde mit document.querySelector das trigger Element suchen dann darauf mit addEventListener("click" ... einen Event Lstener registrieren und dann, wenn das Event ausgelöst wird die style.display Eigenschaft des Elements verändern z.B. "block" oder "none".
            Damit kommst du ganz ohne jQuery aus.

            Comment

            • #7
              Der Ersteller ist nicht mehr interessiert
              Des Weiteren bedeutet für mich ein- ausblenden eben ein faden.
              Dafür hat keiner eine Lösung geboten.

              "fade in und sowas selber zusammen nageln"
              "...CSS, um das auch nativ hinzubekommen."
              "...."

              Das Elemente ein- ausschalten ist wohl ohne jquery sinnvoller

              Sicherlich gibt es oftmals mehrere Wege.
              Wo liegt der Sinn wenn ich statt
              xx.fadeOut("fast");
              mehr Zeilen an CSS und Javsscript programmiere?
              Schnell, getestet, effizient ist halt anders.
              Insofern halt ich
              "jQuery war vor 5 Jahren durchaus hilfreich"
              das dann nicht für gegeben
              Christian

              Comment

              • #8
                Originally posted by Christian Marquardt
                Des Weiteren bedeutet für mich ein- ausblenden eben ein faden.
                Dafür hat keiner eine Lösung geboten.
                Originally posted by Arne Drews
                Geht es um die smoothe Einblendung, wie Christian Marquardt es im jQuery Beispiel gezeigt hat, bedarf es lediglich ein wenig CSS, um das auch nativ hinzubekommen.
                Klar wäre Dein jQuery-Code in Summe etwas schmaler, aber Du musst rein für diesen Zweck die komplette Bibliothek laden, was absoluter Overhead ist.
                Dabei meine ich nicht in Bezug auf die heutigen Bandbreiten, sondern einfach, dass Du > 30kB an Code hast, um Deinen Code erstmal verwenden zu können. Wenn man das vergleicht, ist die jQuery-Lösung insgesamt deutlich größer, wie natives JS und CSS3.
                PHP rocks!
                Eine Initiative der PHP Community

                Comment

                • #9
                  Tja, auf dieses Argument habe ich gewartet. Ist fast so wie "Die EXE nimmt zuviel Platz auf der Festplatte ein"
                  JQuery mit 30 Kb zu groß (Ausgepackt 80 Kb)
                  Übertragung: 39 ms

                  Es werden heutzutage immens große Bilder, MP3, usw, per CMS oder Zusatz Libs erzeugte Seiten mit Unmengen an JS,CSS übertragen, Datenaustausch mit diversen Diensten (google), Ajax-Requests ohne Ende
                  und 30 Kb in einer extra Datei sind zu groß, ein Overhead???

                  Des weiteren wird man ja die Lib nun nicht nur fürs faden nutzen.

                  Aber dann auch eine Funktion entwerfen, die
                  - einen Parameter für die Zeitdauer hat
                  - prüft, ob das Objekt überhaupt Opacity kann
                  - mehrere Objekt gleichzeitig faden kann
                  - eine Funktion am Ende bereitstellt

                  Des Weiteren -> eigener, ungetesteter, neuer Code gegenüber bewährtem Code

                  Nunja, ich sagte ja schon, es gibt viele Wege nach Rom. Einige hart und steinig, andere schenll

                  Zuletzt editiert von Christian Marquardt; 10.08.2021, 08:35.
                  Christian

                  Comment

                  • #10
                    Es werden heutzutage immens große Bilder, MP3, usw, per CMS oder Zusatz Libs erzeugte Seiten mit Unmengen an JS,CSS übertragen, Datenaustausch mit diversen Diensten (google), Ajax-Requests ohne Ende
                    und 30 Kb in einer extra Datei sind zu groß, ein Overhead???
                    Und ich wusste, dass die Reaktion kommt

                    Lies doch bitte meinen Post genau, ich habe extra geschrieben, dass ich nicht von Bandbreite o.ä. rede.

                    Fakt ist, Du benötigst eine Code-Bibliothek, die > 30kB ist, um Deine Paar Zeilen überhaupt umsetzen zu können.
                    Was ist also in Summe weniger Code? Es geht hier ja nur darum, dass man für die Anforderung des TE keineswegs jQuery benötigt, noch jQuery die beste Wahl ist.
                    Es wurde natives JS als Alternative vorgeschlagen, das muss erlaubt sein, oder?
                    PHP rocks!
                    Eine Initiative der PHP Community

                    Comment

                    • #11
                      Ich habe deinen Post gelesen! Das einzige, wo ich auf die Bandbreite hingewiesen haben, ist die Übertragungsdauer.
                      Ansonsten habe ich auf Massen vom Code hinwiesen, der Bsp. bei Nutzung von Frameworks (Primefaces, JS-Libs u.a.) ebenfalls erzeugt und übertragen wird. Das ist dann wurscht?

                      Warum sollte es um weniger Code gehen? Noch dazu, das man den Code gar nicht selbst erzeugt. Wo ist da die Notwendigkeit bei 30 kb. Bei dem ganzen was sonst so übertragen wird.
                      Üblicherweise ist die Anforderung heutzutage Code schnell bereitzustellen, nicht platzsparend.

                      Wo habe ich gesagt, das nativer Code nicht erlaubt ist, .......aber ....wo ist der?

                      "Des Weiteren bedeutet für mich ein- ausblenden eben ein faden.
                      Dafür hat keiner eine Lösung geboten."
                      Christian

                      Comment

                      • #12
                        Es werden heutzutage immens große Bilder, MP3, usw, per CMS oder Zusatz Libs erzeugte Seiten mit Unmengen an JS,CSS übertragen, Datenaustausch mit diversen Diensten (google), Ajax-Requests ohne Ende
                        und 30 Kb in einer extra Datei sind zu groß, ein Overhead???
                        Nein, ist es nicht, da stehe ich ebenso zu meinen Aussagen. Ich versuche Projekte immer nativ umzusetzen, egal ob JavaScript oder PHP. Frameworks sind für mich nur in den seltensten Fälleneine Lösung.

                        Aber ich sehe schon, auch wenn ich Dein KnowHow schätze, führt das hier nur zu einer reinen Grundsatzdiskussion, aber daran bin ich nicht interessiert.
                        Mir geht es rein darum, dem TE zu vermitteln, dass er keine Bibliotheken benötigt, um sein Vorhaben dennoch relativ einfach umsetzen zu können.
                        Du darfst das gerne immer wieder hinterfragen, aber ich weiß nicht, was es dem TE bringen soll.

                        Wo habe ich gesagt, das nativer Code nicht erlaubt ist, .......aber ....wo ist der?
                        Und wenn ich den Code nachher dazu nachreiche, kommt welches Argument dagegen?

                        Also mal ganz ehrlich, wie gesagt, ich schätze Dich hier im Forum wirklich sehr, weil Du auch echtes KnowHow hast und immer gute Tipps gibst, aber im Grunde sieht man hier an diesem Thread, dass Deine Sichtweise für Dich the best way to go zu sein scheint und das kann ich ehrlich gesagt nicht verstehen. Aber jeder wie er mag. Der TE soll halt entscheiden, ob er jQuery oder was auch immer verwendet oder es nativ umsetzt und so auch noch grundlegendes über JavaScript lernt.

                        Ist nicht persönlich gemeint, aber ich bin raus aus dieser aus meiner Sicht unnötigen Diskussion.

                        PHP rocks!
                        Eine Initiative der PHP Community

                        Comment

                        • #13
                          Habe nie meine Sichtweise als die einzig mögliche dargestellt. Das ich sie für "the best way to go" halte -> ja

                          Aber wenn hier x-Leute ankommen mit "geht auch ohne" und keiner irgendeine tatsächliche Lösung hat, wird doch eine Nachfrage erlaubt sein.
                          Ich versuch auch möglichst ohne Libs auszukommen. Aber für meine Vorgehensweise hat es sich als gut erwiesen, diese und jene Libs einzusetzen, weil sie Zeit sparen.

                          Christian

                          Comment

                          • #14
                            https://stackoverflow.com/questions/...t-on-page-load

                            Ist allerdings nur die halbe Miete
                            Christian

                            Comment

                            • #15
                              https://codepen.io/PHProcks/pen/LYyMQPE
                              Ausbaufähig, aber mal auf die Schnelle, nur um kurz zu zeigen, dass das kein Hexenwerk ist.
                              PHP rocks!
                              Eine Initiative der PHP Community

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X