Warum funktioniert das Materialize-Framework nicht?

Hallo zusammen

In einigen meiner Projekte habe ich Bootstrap angewendet. Nun wollte ich aber mal was Neues ausprobieren. Auch, weil mir das Design von Bootstrap nicht so gut gefällt. Darum habe ich das Materialize-Framework entdeckt, welches mir wirklich sehr gut gefällt. Ich würds gerne anwenden. Doch immer da, wo Javascript ins Spiel kommt, funktioniert gar nichts mehr.

Als Einstieg wollte ich einfach nur eine Navbar einrichten. Dazu habe ich 1:1 alles kopiert, wies in der Dokumentation steht. Zuerst habe ich von dieser Seite das HTML-Setup übernommen und Materialize heruntergeladen.

Dann habe ich von dieser Seite die "Extended Navbar with Tabs" kopiert. So sollte sie aussehen:

Mein Quellcode sieht dann am Ende so aus:

Meine Seite sieht aber so aus:

Die Test-Div's 1-4 sollten ja nur angezeigt werden, wenn sie in der Navbar angeklickt werden. Es ist ja klar, dass sie angezeigt werden, weil sie nicht durch CSS versteckt werden. Das bedeutet wohl, dass die Dokumentation von Materialize nicht vollständig ist. Wenn ich nicht alle Infos in der Dokumentation finde, muss ich das Framework in Frage stellen und ggf. darauf verzichten.

Answer 1

[regex9]

Im Test scheint es zum einen ein Problem mit den JS-Dateien zu geben, die im Download-Ordner beigelegt sind, aber auch die notwendige Einbindung von jQuery findet tatsächlich keinerlei Erwähnung (auch, wenn man diese Abhängigkeit eh bald loswerden möchte).

Binde stattdessen diese beiden Skripte am Ende deines body-Elements ein:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

Ich habe jetzt nicht viele materialize.min.js-Versionen getestet, mit der aktuell vom CDN gebotenen Version scheint es jedenfalls nicht zu funktionieren.

Answer 2

[Steffile]

Vermutlich musst du auch jquery einbinden, tippe ich mal ohne Materialize zu kennne