Bootstrap, navigation dropdown problem

[venom2k6]

Hi, ich mache grade eine Umschulung zum Fachinformatiker und wir haben eine aufgab bekommen eine kleine website zu basteln. ich habe mich für das framework bootstrap entschieden und habe grade ein problem mit der navigation, welche ein Dropdownmenü beinhaltet.

Wenn ich die Punkte im Dropdown menü anklicke wird der richtige Tab geladen. allerdings kann ich die Tabs im Dropdownmenü nur einmalig laden und sie werden dauerhaft blau hinterlegt.

Navigation.php
[src=html5]
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Startseite</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="aboutme-tab" data-bs-toggle="tab" data-bs-target="#aboutme" type="button" role="tab" aria-controls="aboutme" aria-selected="false">Über Mich</button>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Info</a>
<ul class="dropdown-menu" id="myTab" role="tablist">
<li class="nav-item active" role="presentation"><button class="dropdown-item" id="pcbuild-tab" data-bs-toggle="tab" data-bs-target="#pcbuild" type="button" role="tab" aria-controls="pcbuild" aria-selected="true">PC-Build</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="pcservice-tab" data-bs-toggle="tab" data-bs-target="#pcservice" type="button" role="tab" aria-controls="pcservice" aria-selected="false">PC-Service</button></li>
<li><hr class="dropdown-divider"></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="website-tab" data-bs-toggle="tab" data-bs-target="#website" type="button" role="tab" aria-controls="website" aria-selected="false">Website</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="netzwerk-tab" data-bs-toggle="tab" data-bs-target="#netzwerk" type="button" role="tab" aria-controls="netzwerk" aria-selected="false">Netzwerk</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="administration-tab" data-bs-toggle="tab" data-bs-target="#administration" type="button" role="tab" aria-controls="administration" aria-selected="false">Administration</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="hoschool-tab" data-bs-toggle="tab" data-bs-target="#hoschool" type="button" role="tab" aria-controls="hoschool" aria-selected="false">Home Office</button></li>
<li><hr class="dropdown-divider"></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="electronic-tab" data-bs-toggle="tab" data-bs-target="#electronic" type="button" role="tab" aria-controls="electronic" aria-selected="false">Elektronik</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="cadservice-tab" data-bs-toggle="tab" data-bs-target="#cadservice" type="button" role="tab" aria-controls="cadservice" aria-selected="false">3D CAD</button></li>
<li class="nav-item" role="presentation"><button class="dropdown-item" id="dreidproto-tab" data-bs-toggle="tab" data-bs-target="#dreidproto" type="button" role="tab" aria-controls="dreidproto" aria-selected="false">3D Protyping</button></li>
</ul>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="referenzen-tab" data-bs-toggle="tab" data-bs-target="#referenzen" type="button" role="tab" aria-controls="referenzen" aria-selected="false">Referenzen</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="shop-tab" data-bs-toggle="tab" data-bs-target="#shop" type="button" role="tab" aria-controls="shop" aria-selected="false">Shop</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="imprint-tab" data-bs-toggle="tab" data-bs-target="#imprint" type="button" role="tab" aria-controls="imprint" aria-selected="false">Impressum</button>
</li>
<!--<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>-->
</ul>
[/src]

index.php
[src=html5]
<content>
...
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><?php include 'inc/content/home.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="aboutme" role="tabpanel" aria-labelledby="aboutme-tab"><?php include 'inc/content/aboutme.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="referenzen" role="tabpanel" aria-labelledby="referenzen-tab"><?php include 'inc/content/referenzen.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="shop" role="tabpanel" aria-labelledby="shop-tab"><?php include 'inc/content/shop.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="imprint" role="tabpanel" aria-labelledby="imprint-tab"><?php include 'inc/content/imprint.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="pcbuild" role="tabpanel" aria-labelledby="pcbuild-tab"><?php include 'inc/content/svc_build.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="pcservice" role="tabpanel" aria-labelledby="pcservice-tab"><?php include 'inc/content/svc_repair.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="website" role="tabpanel" aria-labelledby="website-tab"><?php include 'inc/content/svc_website.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="netzwerk" role="tabpanel" aria-labelledby="netzwerk-tab"><?php include 'inc/content/svc_network.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="administration" role="tabpanel" aria-labelledby="administration-tab"><?php include 'inc/content/svc_admin.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="hoschool" role="tabpanel" aria-labelledby="hoschool-tab"><?php include 'inc/content/svc_school.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="electronic" role="tabpanel" aria-labelledby="electronic-tab"><?php include 'inc/content/svc_electronic.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="cadservice" role="tabpanel" aria-labelledby="cadservice-tab"><?php include 'inc/content/svc_3dcad.php'; //Einbindung des Contents ?></div>
<div class="tab-pane fade" id="dreidproto" role="tabpanel" aria-labelledby="dreidproto-tab"><?php include 'inc/content/svc_3dprototype.php'; //Einbindung des Contents ?></div>
</div>
...
</content>[/src]

beim öffnen des Dropdowns


seite wird geladen und link als aktiv blau hinterlegt


beim anklicken des nächsten elements wird die seite im tab angezeigt, allerdings auch markiert, ein weiteres anklicken der blau markierten ist nicht mehr möglich


weiß jemand rat probiere schon seit 2 stunden rum und kriegs nicht hin

schon mal danke im vorraus

 

[dexter]

Sowas passiert, wenn man keine Ahnung hat und irgendein fettes Framework hernimmt.
Dein Problem liegt im CSS. Herausfinden wo das Problem ist, kannst Du über die Browserkonsole, indem Du die beiden Elemente inspizierst und schaust, wo das Blau herkommt.
Alternativ ein Link auf die Seite, dann kann wer anders schauen.

 

[BurnerR]

Bootstrap 4 und 5 unterscheiden sich hier:

You do not have permission to view link please Anmelden or Registrieren

You do not have permission to view link please Anmelden or Registrieren

Bei 4 wird das wie es klingt rein mit javascript callbacks geregelt. Bei 5 auch über aria-current. Letzteres sehe ich bei dir aber nicht, frei geraten würde ich vermuten dass dir da ein zweiter Mechanismus rein grätscht, namentlich tabs. Die hast du sicherlich etwas ungünstig miteinander verwurstet.
Hab das mit tabs nicht im Kopf aber das deine Dropdown-Elemente auch Tabs sind scheint mir erst einmal problematisch.

 

[venom2k6]

@dexter
die seite ist aktuell rein offline und läuft über xampp heute nachmittag könnte ich das wohl mal testweise auf einen webserver hochladen
es sollte ja nicht verboten sein ein fettes framework zu nutzen und bei problemen sich rat zu suchen oder? Schließlich lerne ich und bin bereit Eigeninitiative zu leisten. in foren fragen ist eigentlich mein letztes mittel wenn ich den wald vor lauter bäume nicht sehe.
Dennoch danke ich dir für den hinweis mit der browserkonsole, an der hatte ich in dem moment gar nicht gedacht

@burnerR
danke für den hinweis, das schaue ich mir mal genauer an.

 

[BurnerR]

ImHo HTML und CSS sollte man natürlich beherrschen, aber dann bietet ein Framework wie Bootstrap so viel Komfort und Features, ich würde im Leben nicht ohne arbeiten wollen - bin allerdings auch mehr Hobby-Frontendmensch.

 

[theSplit]

Ich kann es selbst nicht testen, aber was mir spontan auffällt. Du hast folgenden Code drin:

[src=html5]<li class="nav-item active" role="presentation"><button class="dropdown-item" id="pcbuild-tab" data-bs-toggle="tab" data-bs-target="#pcbuild" type="button" role="tab" aria-controls="pcbuild" aria-selected="true">PC-Build</button></li>[/src]

Einmal die Klasse für das li-Element [kw]active[/kw] und [kw]aria-selected="true"[/kw].

Vermutlich ist deshalb auch der Menüpunt bei einem Wechsel auf eine andere Seite aktiv.
Du mußt das "active" bei einer anderen Seite herausnehmen und das "aria-selected" sollte auf "[kw]aria-selected="false"[/kw] stehen wie auch bei den anderen Menüpunkten.

Was mutmaßlich passiert, dass der gerade aktive Tab nicht angeklickt werden kann, das könnte über Javascript geregelt werden bzw. wenn aria-selected auf "true" steht, dass der Menüpunkt keinen "Klick" emfängt weil schon aktiv.

Am einfachsten du änderst die beiden Attribute. Also "active" aus den Klassennamen raus für das [kw]li nav-item[/kw] und aria-selectet auf "false".
Teste dann ob das Laden einer anderen Seite immernoch das Problem macht wenn du wieder auf "PC Build" klicken willst ob der Menüpunkt immernoch gesperrt/nicht klickbar ist.

Edit: Wenn ich richtig lese sorgt das [kw]active[/kw] nur für die Hervorhebung des Menüpunkts - aber testweise solltest du das auch mal entfernen um sicher zu gehen.