Ich versuche, die ausgewählte Registerkarte beim Aktualisieren mit Bootstrap 3 aktiv zu halten . Versucht und überprüft mit einigen Fragen, die hier bereits gestellt wurden, aber keine Arbeit für mich. Ich weiß nicht, wo ich falsch liege. Hier ist mein Code
HTML
<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
<li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
<li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
<li><a href="#career-path" data-toggle="tab">Career Path</a></li>
<li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->
<div class="tab-content">
<div class="tab-pane active" id="personal-info">
tab data here...
</div>
<div class="tab-pane" id="Employment-info">
tab data here...
</div>
<div class="tab-pane" id="career-path">
tab data here...
</div>
<div class="tab-pane" id="warnings">
tab data here...
</div>
</div>
Javascript :
// tab
$('#rowTab a:first').tab('show');
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});
//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
$('#'+selectedTab).tab('show');
}
jquery
twitter-bootstrap
tabs
twitter-bootstrap-3
Codeliebhaber
quelle
quelle
console.log("selectedTab::"+selectedTab);
, bekam ich :selectedTab::undefined
. Die Logik, die Sie angewendet haben, ist also nicht korrektAntworten:
Ich bevorzuge es, die ausgewählte Registerkarte im Hashwert des Fensters zu speichern. Dies ermöglicht auch das Senden von Links an Kollegen, die dann "dieselbe" Seite sehen. Der Trick besteht darin, den Hash der Position zu ändern, wenn eine andere Registerkarte ausgewählt wird. Wenn Sie auf Ihrer Seite bereits # verwenden, muss möglicherweise das Hash-Tag aufgeteilt werden. In meiner App verwende ich ":" als Hashwerttrennzeichen.
JavaScript muss nach dem oben Gesagten in einen
<script>...</script>
Teil eingebettet werden .quelle
e.preventDefault();
$(this).tab('show');
Dies ist das Beste, das ich versucht habe:
quelle
"a[data-toggle=tab]"
wäre besser, den Selektor zu ändern . Die Art und Weise, wie der Selektor jetzt geschrieben ist, ändert auch die Browser-URL, wenn Sie auf einen Link klicken, um beispielsweise ein Modal zu öffnen.data-toggle="dropdown"
in einem Fall verwendet werden und die ich zufällig auf derselben Seite mit Registerkarten habe. Wie hier vorgeschlagen, hat das Ersetzen$(document.body).on("click", "a[data-toggle]", function(event) {
durch$(document.body).on("click", "a[data-toggle='tab']", function(event) {
nur den Trick für mich getan.Eine Mischung aus anderen Antworten:
Einfach kopieren & einfügen;)
quelle
Xavis Code funktionierte fast vollständig. Wenn Sie jedoch zu einer anderen Seite navigieren, ein Formular senden und dann mit meinen Registerkarten auf die Seite umgeleitet werden, wird die gespeicherte Registerkarte überhaupt nicht geladen.
localStorage zur Rettung (leicht geänderter Nguyen-Code):
quelle
[data-toggle="pill"]
für PillenDieser verwendet HTML5
localStorage
zum Speichern der aktiven RegisterkarteRef: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp
quelle
Basierend auf den Antworten von Xavi Martínez und koppor habe ich eine Lösung gefunden, die den URL-Hash oder localStorage verwendet, je nachdem, ob letzterer verfügbar ist:
Verwendung:
Es hält nicht mit dem Zurück-Knopf Schritt, wie es bei der Lösung von Xavi Martínez der Fall ist .
quelle
Mein Code, es funktioniert für mich, ich benutze
localStorage
HTML5quelle
Ich habe es versucht und es funktioniert: (Bitte ersetzen Sie dies durch die Pille oder Lasche, die Sie verwenden)
Ich hoffe es würde jemandem helfen.
Hier ist das Ergebnis: https://jsfiddle.net/neilbannet/ego1ncr5/5/
quelle
Nun, das ist schon 2018, aber ich denke, es ist besser spät als nie (wie ein Titel in einer Fernsehsendung), lol. Hier unten ist der jQuery-Code, den ich während meiner Diplomarbeit erstellt habe.
und hier ist der Code für Bootstrap-Registerkarten:
Hier sind Schnellcodes für Sie:
Kommen wir nun zur Erklärung:
Suchen Sie nach Beispielen? Hier ist eine für euch. https://jsfiddle.net/Wineson123/brseabdr/
Ich wünschte, meine Antwort könnte euch allen helfen. Cheerio! :) :)
quelle
Da ich noch keinen Kommentar abgeben kann, habe ich die Antwort von oben kopiert, es hat mir wirklich geholfen. Aber ich habe es geändert, um mit Cookies anstelle von #id zu arbeiten, also wollte ich die Änderungen teilen. Auf diese Weise kann die aktive Registerkarte länger als nur eine Aktualisierung (z. B. mehrfache Umleitung) gespeichert werden oder wenn die ID bereits verwendet wird und Sie die Koppors-Split-Methode nicht implementieren möchten.
quelle
Ich habe den von Xavi Martínez angebotenen Code ausprobiert . Es hat funktioniert, aber nicht für IE7. Das Problem ist - Registerkarten verweisen nicht auf relevante Inhalte.
Daher bevorzuge ich diesen Code, um dieses Problem zu lösen.
quelle
Danke für das Teilen.
Indem Sie alle Lösungen lesen. Ich habe eine Lösung gefunden, die den URL-Hash oder localStorage verwendet, abhängig von der Verfügbarkeit des letzteren mit dem folgenden Code:
quelle
Für Bootstrap v4.3.1. Versuchen Sie es unten:
quelle
Mit html5 habe ich mir das ausgedacht:
Einige waren auf der Seite:
Der Ansichtsbeutel sollte nur die ID für die Seite / das Element enthalten, z. B.: "Testen"
Ich habe eine site.js erstellt und den Scrip auf der Seite hinzugefügt:
Jetzt müssen Sie nur noch Ihre IDs zu Ihrer Navigationsleiste hinzufügen. Z.B.:
Alle begrüßen das Datenattribut :)
quelle
Zusätzlich zu Xavi Martínez 'Antwort vermeidet er den Sprung beim Klicken
Springen vermeiden
Verschachtelte Registerkarten
Implementierung mit dem Zeichen "_" als Trennzeichen
quelle
Wir haben jquery trigger verwendet, um ein Skript zum Laden herunterzuladen
$ (". class_name"). trigger ('click');
quelle
Wehe, es gibt so viele Möglichkeiten, dies zu tun. Ich habe mir das ausgedacht, kurz und einfach. Hoffe das hilft anderen.
quelle
quelle