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.
Beiträge von DieterWo
-
-
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".
-
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.
-
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. -
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):
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <title>Testseite</title> <meta charset="utf8"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="testseite.de"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <style> .page{ display: table; width: 100%; } .page-content, .sidebar{ display: table-cell; } .sidebar{ width: 330px; padding-right: 50px; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="d-none d-md-block col-md-12"> <img src="./Images/Header_2.jpg" alt="" style="width: 100%; max-height: 300px;"> </div> <div class="d-md-none col-12"> <!--<img src="./Images/HeaderKlein.png" alt="" style="width: 100%;">--> </div> </div> </div> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand d-md-none" href="#"><img src="./Images/LogoMenu.png" alt="" style="height: 30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" href="#home" id="home-tab" data-target="homw" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">HOME<span class="sr-only">(current)</span></a> <a class="nav-link" href="#angebote" id="angebote-tab" data-target="angebot" data-toggle="tab" role="tab" aria-controls="angebote" aria-selected="false">UNSERE AKTUELLEN ANGEBOTE</a> <a class="nav-link" href="#kontakt" id="kontakt-tag" data-target="kontakt" data-toggle="tab" role="tab" aria-controls="kontakt" aria-selected="false">KONTAKT</a> </div> </div> </nav> <div class="nav-content"> <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> </div> <div class="container-fluid"> <div class="row"> <div class="col-12 bg-dark text-right text-xs-center p-3"> <strong><a href="impressumg.html">IMPRESSUM</a> - <a href="abgs.html">AGB's</a></strong> </div> </div> </div> </body> </html>
