Ich bekomme viele Beschwerden von den Benutzern, dass sie es ärgerlich finden, wenn sie meine jQuery-basierten Registerkarten verwenden, wenn sie in ihrem Browser zurückschlagen, nicht zur vorherigen Registerkarte, sondern zur vorherigen Seite zu wechseln . Ich habe die folgenden vorherigen / nächsten Schaltflächen hinzugefügt, aber nicht genug. Wie kann ich meine Schaltflächen so konfigurieren, dass Benutzer zur vorherigen Registerkarte und nicht zur vorherigen Seite wechseln, wenn sie auf den Zurückpfeil des Browsers klicken? Sie können es hier testen .
$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
if (index == 0) {
index = 1;
}
$('.quicktabs-tabs li').eq(index - 1).addClass('active');
$('.quicktabs-tabs li').eq(index - 1).find('a').click();
return false;
});
$('.tablink-next').click(function () {
var length = $('.quicktabs-tabs').first().children().size();;
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
// if (parseInt(index) == parseInt(length) - 1 ) {
// index = index - 1;
// }
if (parseInt(index) == parseInt(length) - 1) {
window.location.href = '/home'; //redirect to home
//index = index - 1;
}
$('.quicktabs-tabs li').eq(index + 1).addClass('active');
$('.quicktabs-tabs li').eq(index + 1).find('a').click();
return false;
});
javascript
jquery
Efe
quelle
quelle
Antworten:
Sie können den Verlauf verwenden.
Drücken Sie einen Verlaufsstatus, wenn eine neue Registerkarte geöffnet wird
Referenz: https://developer.mozilla.org/en-US/docs/Web/API/History_API
quelle
Ohne Ihren vollständigen Code kann ich Ihnen kein maßgeschneidertes Beispiel geben, aber Sie können einfach Anker-Tags zu allen Registerkarten hinzufügen, die div enthalten.
Dadurch wird die URL jedes Mal aktualisiert, wenn ein Benutzer auf einen Tab-Link klickt. Diese URL-Änderungen werden im Browserverlauf gespeichert und beim Rückwärtsnavigieren abgerufen.
Die aktualisierte URL sieht bei jedem Klicken auf eine Registerkarte folgendermaßen aus:
https://example.com#Tab1
https://example.com#Tab2
https://example.com#Tab3
https://example.com#Tab4
quelle
Auf der einen Seite ist Ihre nächste Tab-Funktion in Javascript geschrieben, und auf der anderen Seite verwendet die Zurück-Schaltfläche im Browser den Browserverlauf, sodass dies für Ihre Funktionen irrelevant ist und Sie überhaupt nicht zum vorherigen Tab gelangen können.
Sie haben also zwei Möglichkeiten, um dies zu erreichen:
1. Versuchen Sie, jeden Schritt auf eine andere Seite zu laden, indem Sie den Browser aktualisieren, damit die Seite im Browserverlauf gespeichert wird. Durch Drücken der Zurück-Taste können Sie den vorherigen Schritt sehen
2. Sie sollten eine "vorherige" Schaltfläche haben, um den vorherigen Schritt genau wie Ihre nächste Schritt-Schaltfläche zu sehen
quelle
Ich habe Bootsrap-Tabs mit Browser-Tab-Navigation verwendet. Das vollständige Beispiel ist unten
Sie können das Live-Arbeitsbeispiel meines Codes überprüfen
1> GEHE ZU https://www.notesgen.com (Desktop verwenden)
2> Erstellen Sie Ihr Konto als Schüler
3> GEHE ZU Mein Konto / Meine Downloads
4> Klicken Sie auf Meine Verbindungen
quelle
Das Ändern des Hash ähnelt dem Push-Status, der
history.pushState
daspopstate
Ereignis auslöst . Wenn Sie im Browser vor und zurück drücken, werden diese Status angezeigt und verschoben, sodass Sie keinen anderen benutzerdefinierten Handler benötigen.PS: Sie können
:target
Ihreractive
Klasse einen CSS-Stil hinzufügen . Daswindow.addEventListener('popstate'
hier protokolliert nur, um Ihnen das Ereignis anzuzeigen, aber dasevent.state
wird in diesem Fall immer null sein.Führen Sie ein Code-Snippet aus , und navigieren Sie durch die Registerkarten. Verwenden Sie dann die Schaltflächen zum Zurück- und Weiterleiten des Browsers.
quelle
Verhindern Sie als Erstes, dass der Link die URL im Verlauf von $ event.preventDefualt () im Klickereignis übermittelt, und passen Sie den Verlauf mit history.pushState (Daten, Titel, URL) an .
In js haben wir ein Ereignis, das uns hilft, das Vorwärts- und Rückwärtsereignis durch den Benutzer zu steuern. Dieser Ereignisname lautet "popstate". Sie können es mit window.addEventListener ('popstate', Rückruf) verwenden . In der Rückruffunktion können Sie die Registerkarte aktivieren und deaktivieren (Klasse hinzufügen und entfernen) und die URL extrahieren.
Ich zeige dies mit einem Beispielcode. Um es besser zu machen und zu verstehen, versuchen Sie es auf einem Server oder einem lokalen Server, da das Ändern der URL hier begrenzt ist:
quelle