• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

Bootstrap, navigation dropdown problem

venom2k6

NGBler

Registriert
15 Juli 2013
Beiträge
107
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
2021-02-25 17_08_52-Hello, world!.png

seite wird geladen und link als aktiv blau hinterlegt
2021-02-25 17_09_29-Hello, world!.png

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
2021-02-25 17_09_43-Hello, world!.png

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

schon mal danke im vorraus
 

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
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

Bot #0384479

Registriert
20 Juli 2013
Beiträge
5.504
Bootstrap 4 und 5 unterscheiden sich hier:
https://getbootstrap.com/docs/4.0/components/dropdowns/#active-menu-items
https://getbootstrap.com/docs/5.0/components/dropdowns/#active
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

NGBler

Registriert
15 Juli 2013
Beiträge
107
  • Thread Starter Thread Starter
  • #4
@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.
 
Zuletzt bearbeitet:

BurnerR

Bot #0384479

Registriert
20 Juli 2013
Beiträge
5.504
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

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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.
 
Zuletzt bearbeitet:
Oben