2016-03-23 6 views
1

So habe ich versucht habe dieses Tutorial und die Tabs funktionieren einwandfrei:Dynamische Tabs - Ein Link funktioniert nur, wenn geklickt

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h 

Aber das Problem ist, wie folgt:

ich in der Lage bin auf den Registerkarten klicken und Navigieren, aber wenn ich den Link direkt zu einer bestimmten Registerkarte verwende, wird die erste (Standard) Registerkarte geöffnet.

Beispiel:

# menu2 Anfügen nicht auf die Registerkarte mit der menu2 ID # zugewiesen wird geöffnet, wenn Sie den Link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2

Danke Besuch!

+0

Was ist Ihre Frage? –

Antwort

2

Vielleicht sollten Sie dies versuchen:

$(document).ready(function() { 
    var hash = document.location.hash; 
    if(hash.length > 1) { 
    $("a[href='" + hash + "']").trigger("click"); 
    } 
}); 

Es wird überprüft, ob es einen Hash ist, wenn das Dokument geöffnet wird, und klickt dann auf den richtigen Link

Wenn Sie es hinzufügen dazwischen „<script></script>“ in die "tryit", und klicken Sie auf "Ergebnisse sehen", Sie werden sehen, dass es passiert. Ex: hash=menu3

+0

Dies scheint 95% der Zeit zu funktionieren. Ich denke die anderen 1%, die js wird nicht richtig geladen oder so. – user1423798

1

Das ist, weil bootstraps Menü durch Javascript funktioniert, nicht durch die eigentlichen Anker.

Wenn auf eine Registerkarte eine Javascript-Funktion Anklicken aktiviert, die eine active Klasse auf dem Registerkarte setzt und Inhaltsfenster, die die Registerkarte werden dazu führen, markiert und der Inhalt display: block und nicht display: none mehr zu sein (das ist die Standardeinstellung).

Sie müssten den Anker aus der URL beim Generieren der Seite lesen und dann die Klassen active abhängig davon festlegen.

Zusatz: Alternativ können Sie die JavaScript-Schnipsel verwenden, wie von @VirginieLGB vorgeschlagen, aber dann werden Sie einen kurzen Moment des Übergangs wird jedes Mal haben die Seite geladen. Besonders wenn Sie eine größere Seite haben, die länger zum Laden braucht, müssen Sie möglicherweise ein wenig warten, bis das Dokument "bereit" ist, damit die Funktion funktioniert. In diesem Zeitraum wird die erste Registerkarte vor dem Übergang angezeigt und die zweite Registerkarte angezeigt.

0

Ich denke, was Sie fragen, ist: Wenn Sie eine Registerkarte klicken Sie eine neue Seite angezeigt werden öffnen und die aktive Registerkarte möchten.

Die CSS zeigt an, dass die aktive Registerkarte die Klasse .active hat. Sie müssen die Klasse .active an die entsprechende Registerkarte der neu geöffneten Seite anhängen.

Verwandte Themen