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
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
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