Hallo

Die folgenden Sprünge aber geschehen dann pur mit den generierten Links. Das spiegelt sich also auch in den sich ändernden Fragmenten am Ende der URL wieder. Was soll da gepusht oder gepoppt werden?

History-Back sollte halt auch dazu führen, dass das Tab sich ändert. Das geht, auch bei sich ändernden Fragmenten, IMHO nur, wenn man auf popstate reagiert.

Grundsätzlich geht das auch ohne JS, mit dem Betätigen des Zurück-Buttons des Browsers wechselt brav das Fragement und dazu passend das dargestellte Tab. Ohne history.pushState komme ich allerdings an den Anfang zurück und das Tab mit den Benutzer-Informationen, welches beim Aufruf der Seite angezeigt wird, wird nicht dargestellt. Es sind nur der Kopf, die neue Tableiste und die Speichern- und Zurück-Buttons zu sehen.

Im Gegensatz dazu wird mir mit history.pushState das Tab angezeigt, aber auch dort komme ich noch einen Schritt weiter zurück, wo es kein Fragment gibt und ebenfalls nur die Tableiste und die Speichern- und Zurück-Buttons zu sehen ist. Das entspricht dem Zustand der Seite direkt beim/nach dem Laden und vor der Manipulation per JS.

Mit dem einfachen hinzufügen von history.pushState, wie ich es jetzt eingefügt habe, renne ich real noch in eine weitere Falle. Neben der eben beschriebenen Möglichkeit, auf den Zustand vor der Manipulation der URL zurück zu springen, wird mir, wenn ich die URL zu einem anderen als dem zuerst anzuzeigenen Abschnitt (#user-data) aufrufe, sowohl der gewünschte, als darüber auch der Abschnitt #user-data angezeigt.

Da ist also noch Arbeit notwendig. Ich versuche gerade, mich mit history.pushState und popstate vertraut zu machen. Unser Wiki gibt dazu offenbar nichts her. Ich habe jedenfalls nichts gefunden.

Ich bin sowohl für Lesestoff als auch für direkte Hilfe zum und am Code dankbar.

$(document).ready(function(){
	var targetlist = '<nav><ul class="tabswitcher"></ul></nav>', targets = '';
	$('.cf-tab-content').prepend(targetlist);
	$('.cf-tab-pane').each(function(){
		targets += '<li><a href="#' + this.id + '">' + $(this).children('legend').text() + '</a></li>';
	})
	$('.tabswitcher').append(targets);
	history.pushState({}, "", "#user-data");
	$('.tabswitcher li a').on('click', function(){
		if ($('#user-data').hasClass('active')) {
			$('#user-data').removeClass('active');
		}
	});
})

Tschö, Auge