Um etwas Kontext hinzuzufügen, ist dies für a Rubin auf Schienen Anwendung. Ich übergebe ein Array [tab1, tab2] meiner Ansicht nach beide Registerkarten rendern und das Bootstrap-Registerkarten-Plugin verwenden, um ihre Sichtbarkeit umzuschalten.
verwenden Sie eine serverseitige Sprache wie PHP?
– DG3
13. März 2012 um 14:27 Uhr
mit Rails und dem Twitter-Bootstrap-Rails-Gem
– DanS
13. März 2012 um 14:58 Uhr
können Sie nicht während der Seitenaktualisierung eine URL-Variable verwenden und sie mithilfe von Schienen zum Standard machen?
– DG3
13. März 2012 um 15:15 Uhr
Sucrenoir
Dieser Code wählt abhängig vom #Hash den richtigen Tab aus und fügt den richtigen #Hash hinzu, wenn auf einen Tab geklickt wird. (dies verwendet jQuery)
Vielen Dank für diese Antwort. Ich habe einige Änderungen daran vorgenommen, um zwei Probleme zu vermeiden: 1) Das Wechseln der Registerkarten wurde zum Navigationsverlauf hinzugefügt und 2) Die Bildlaufposition ging aufgrund der Fragmentnavigation bei der Rückwärtsnavigation verloren. gist.github.com/josheinstein/5586469
– Josch
15. Mai 2013 um 19:09 Uhr
Dies funktioniert nicht in Bootstrap 3. Verwenden shown.bs.tab Anstatt von shown für den Veranstaltungsnamen. Überprüfe hier
– Zentralmaschine
26. Oktober 2013 um 1:02 Uhr
großartige Antwort, aber wenn Sie vermeiden möchten, dass die Seite “springt”, wenn Sie anfangen, auf Ihre Registerkarten zu klicken, verwenden Sie diesen Code anstelle von “return”. $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { if(history.pushState) history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); else location.hash = '#'+$(e.target).attr('href').substr(1); });
– d-Wade
29. Januar 2014 um 21:35 Uhr
Ich habe die Bootstrap 3-Änderung vorgenommen, sie zu meiner Rails-App hinzugefügt und es hat funktioniert. Zwischen Rails, Gems und StackOverflow habe ich das Gefühl, kaum noch Code zu schreiben.
– Ryan Bosinger
8. April 2014 um 21:51 Uhr
d-Wade
Ich wollte die beste Antwort hier verbessern …
Die Anerkennung geht an Sucrenoir, aber wenn Sie vermeiden möchten, beim Wechseln der Registerkarten auf die Seite zu springen, verwenden Sie diesen verbesserten Code:
$(document).ready(function() {
// Show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// Remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
if(history.pushState) {
history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
} else {
location.hash="#"+$(e.target).attr('href').substr(1);
}
});
});
Beste Antwort für Bootstrap 3
– Ashselbst
23. Dezember 2014 um 13:41 Uhr
Kopieren, einfügen und entspannen. Vielen Dank
– Bojan Kogoj
16. Dezember 2015 um 15:57 Uhr
Während die Antwort von @Sucrenoir gut ist und ich sie verwendet habe, um mein eigenes Problem zu lösen, ersetzt diese Antwort sie, weil die Seite auf Sucrenoirs Antwort irgendwie nicht aktualisiert wird # beim ersten Tabwechsel. Nur die erste. Aber dieser Code von @dootzky tut Aktualisieren Sie die Referenz beim ersten und jedem Klick auf die Registerkarte. Prost
– Martin
1. Februar 2016 um 22:08 Uhr
Ich erhalte eine Fehlermeldung TypeError: $(...).attr(...) is undefined für diese Zeile history.pushState(null, null, '#' + $(e.target).attr('href').substr(1));
– Musakkhir Sayyed
28. September 2016 um 13:05 Uhr
Wenn Sie durch Registerkarten navigieren und dann die Zurück-Taste des Browsers drücken, wird die zuvor ausgewählte Registerkarte nicht geladen.
– Karns
10. Juli 2020 um 19:38 Uhr
HandTriX
Hier ist eine andere Möglichkeit, das Problem zu lösen.
Fügen Sie zuerst eine Zeile zum Klickereignis hinzu, um den Hash in der Adressleiste anzuzeigen:
$('#myTab').on('click', 'a', function (e) {
e.preventDefault();
// Add this line
window.location.hash = $(this).attr('href');
$(this).tab('show');
})
Stellen Sie dann sicher, dass der richtige Reiter aktiviert ist onload indem Sie diesen Teil zu Ihrem Document-Ready-Call hinzufügen.
// Cache the ID
var navbox = $('#myTab');
// Activate tab on click
navbox.on('click', 'a', function (e) {
var $this = $(this);
// Prevent the ***default*** behavior
e.preventDefault();
// Set the hash to the address bar
window.location.hash = $this.attr('href');
// Activate the clicked tab
$this.tab('show');
})
// If we have a hash in the address bar
if(window.location.hash){
// Show right tab on load (read hash from address bar)
navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}
Gibt es eine Möglichkeit, dies mit den Zurück- und Vorwärts-Browser-Schaltflächen zu machen?
Ja … Das Skript ändert die für die ausgewählte Registerkarte relevante Browser-URL, ändert jedoch nicht die Registerkarte selbst. Es bleibt immer noch so, wie es eingeschaltet ist, wenn der Zurück-Pfeil des Browsers gedrückt wird.
– Jack Eccleshall
3. September 2013 um 16:03 Uhr
Ok man muss sich das anhören hashchangeVeranstaltung. Quick&Dirty: Demo | Code
– HandTriX
3. September 2013 um 16:24 Uhr
Paul Berka
Ich wollte die besten zwei Antworten hier verbessern. 🙂
// Show active tab on reload
if (location.hash !== '')
$('a[href="' + location.hash + '"]').tab('show');
// Remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
if(history.pushState) {
history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
}
else {
location.hash="#"+$(e.target).attr('href').substr(1);
}
});
// Remember to back button
window.onpopstate = function(e) {
$('a[href="' + location.hash + '"]').tab('show');
};
Awsom3D
Getestet für Bootstrap 4, minimalistischer (zweizeiliger) Code ohne History-Push, der auf jeder Seite mit Navigationsregisterkarten funktioniert.
<script type="text/javascript">
$(document).ready(function(){
// Store the currently selected tab in the hash value
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });
// Switch to the currently selected tab when loading the page
$('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
});
</script>
Das funktioniert einfach! Ich habe es einfach kopiert und das war’s! (Bootstrap4)
– lewis4u
22. August 2019 um 12:59 Uhr
Rory McCrossan
Sie können das URL-Fragment erhalten (das ist der Teil der URL nach #) beim Laden mit window.location.hashund legen Sie diese Registerkarte ausdrücklich als sichtbar fest:
if (window.location.hash) {
$(window.location.hash).tab('show')
}
Das funktioniert einfach! Ich habe es einfach kopiert und das war’s! (Bootstrap4)
– lewis4u
22. August 2019 um 12:59 Uhr
Gregor Houston
Eine weitere modifizierte Version, wenn Sie nicht möchten, dass Tab-Klicks zum Verlauf hinzugefügt werden, aber auch nicht möchten, dass die Seite auf und ab springt:
$(document).ready(function () {
if (location.hash !== '') {
$('a[href="' + location.hash + '"]').tab('show');
}
$("a[data-toggle="tab"]").on("shown.bs.tab", function (e) {
var hash = $(e.target).attr("href");
if (hash.substr(0,1) == "#") {
var position = $(window).scrollTop();
location.replace("#" + hash.substr(1));
$(window).scrollTop(position);
}
});
});
12668300cookie-checkDer beste Weg, um Twitter Bootstrap-Tabs persistent zu machenyes
verwenden Sie eine serverseitige Sprache wie PHP?
– DG3
13. März 2012 um 14:27 Uhr
mit Rails und dem Twitter-Bootstrap-Rails-Gem
– DanS
13. März 2012 um 14:58 Uhr
können Sie nicht während der Seitenaktualisierung eine URL-Variable verwenden und sie mithilfe von Schienen zum Standard machen?
– DG3
13. März 2012 um 15:15 Uhr