Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
bearbeitet von
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`](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/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. 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](https://developer.mozilla.org/en-US/docs/Web/API/History_API) [versuche](https://css-tricks.com/using-the-html5-history-api/) [gerade](https://www.sitepoint.com/javascript-history-pushstate/), 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.
~~~javascript
$(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
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind **\*prust\***