[Bootstrap] Probleme mit Navbar

  • Hallo Leute,

    ich habe ein Problem mit bootstrap und der Navbar.
    Dargestellt wird alles problemlos. Beim Hoover werden auch die Menueinträge etwas hervorgehoben und der aktive Menupunkt ist ersichtlich.

    Jedoch funktioniert das einblenden des Nav-content nicht. Heist der anfang aktive Nav-content bleibt aktiv und andere werden nicht dargestellt. Zwar spring der Browser nach unten zu dem entsprechenden Content, welcher aber weiterhin ausgeblendet bleigt und das anfangs aktive bleibt auch sichtbar.
    Ich weiß nicht wirklich an welcher stelle ich den Fehler gemacht haben könnte. Mein Erfahrungen halten sich auch ein Grenzen. Deshalb bitte ich um eure Unterstützung. Vielleicht spring jemandem was ins Auge ;)


    Hier mal mein html-code (auf das wesentliche Zusammengekürzt):

  • Hatte ich schon. Hab ich jetzt wieder drin, dann ändert sich das Verhalten, funktionieren tut's aber trotzdem nicht.
    Mit JQuery werden alle Menupunkte, die man anklickt, aktiv, aber der vorherige aktive Menupunkt bleibt aktiv. Der Nav-Content wird weiterhin nicht aktiviert.

  • Leider konnte ich das eigentliche Problem nicht testen, weil es keinen Inhalt gab, zu dem hätte gesprungen werden können. Auf jeden Fall wird jQuery gebraucht, denn ohne geht bei schmalem Fenster das Menü nicht auf, wenn ich auf das Hamburger-Icon klicke. Ich versuche mal, etwas Inhalt mit Sprungmarken hinzu zu fügen ...

  • So wie ich das verstanden habe, sind die Inhalte in .nav-pane über die id entweder hidden oder eben active, also sichtbar.

    Und über href werden die halt aktiviert. Oder ist das nur bei nav-tabs, und muss sonst über js gemacht werden?


    Mir fehlt irgendwie die Überischt über die spezifizierte Funktionen / Auswirkungen der ganzen nav-xxx-klassen im Detail. Zwar kann man in der Dokumentation schon sehr viel lesen welche Menu-Arten man so verwenden kann, aber bei manchen Klassen ist nicht so aufschlußreich wie ich es mir wünschen würde. Bzw. ich werde da manchmal nicht schlau draus.

  • Leider konnte ich das eigentliche Problem nicht testen, weil es keinen Inhalt gab, zu dem hätte gesprungen werden können. Auf jeden Fall wird jQuery gebraucht, denn ohne geht bei schmalem Fenster das Menü nicht auf, wenn ich auf das Hamburger-Icon klicke. Ich versuche mal, etwas Inhalt mit Sprungmarken hinzu zu fügen ...

    Inhalt ist doch da

    Code
    <div class="nav-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
    <div class="nav-pane fade" id="angebote" role="tabpanel" aria-labelledby="angebote-tab">Angebote</div>
    <div class="nav-pane fade" id="kontakt" role="tabpanel" aria-labelledby="kontakt-tab">Kontakt</div>
    <div class="nav-pane fade" id="impressum" role="tabpanel" aria-labelledby="impressum-tab">Impressum</div>
    <div class="nav-pane fade" id="agb" role="tabpanel" aria-labelledby="agb-tab">AGB's</div>

    Wenn auch nur die Wörter "Home", "Angebote", "Kontakt", "Impressum" und "AGB's".

  • Durch Probieren habe ich heraus gefunden, dass das Sichtbar-/Unsichtbarmachen der Inhalte funktioniert, wenn ich die data-target-Attribute in der Navigation lösche. Das Hervorheben der Menüpunkte funktioniert jedoch nur, wenn ich sie zu Tabs mache wie in der Doku beschrieben.

  • Wenn ich data-target aus den Menupunkten löschen funktioniert es je Menupunkt genau 1 mal. Danach ist dieser sohl noch aktiv und der event wird wohl nicht ausgelöst, weil aktiv.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!