Ein gängiges Problem beim jQuery UI Tab Plugin ist, dass die Auswahl eines Tabs nicht gespeichert wird. Klickt man also beispielsweise auf Tab 4 und führt dann einen Reload der Webseite durch, landet man wieder beim ersten Tab. Wenn es einmal passiert, ist es sicherlich nicht ganz so tragisch, aber wenn man eine Anwendung hat, bei der diese Situation öfters auftritt, kann es schnell nervig für die Besucher werden. Wie ihr das Problem umgehen könnt, möchte ich euch mit dem Tipp aus diesem Post zeigen.

Das eigentlich Problem an der Sache ist, dass der jeweilige Tabaufruf via Javascript/jQuery realisiert wird. Es ist so erst einmal nicht möglich die aktuelle Tab-Auswahl zu speichern. Aber jQuery wäre nicht jQuery, wenn es nicht auch dafür eine simple, aber geniale Lösung gibt.

Problem: Bei Reload wird der vorher ausgewählter Tab nicht mehr ausgewählt

Als Erstes benötigt ihr das Cookie-Plugin für jQuery. Das Plugin wird, wie jQuery, im HEAD-Tag eingebunden.

  

Nachdem ihr das Cookie-Plugin eingebunden habt, müsst ihr lediglich dem Tab-Plugin mitteilen, dass er zum Speichern der aktuellen Tab-Auswahl Cookie verwenden soll. Das könnt ihr folgendermaßen machen:

  $( ".selector" ).tabs({ cookie: { expires: 7 } });

Mit expires gebt ihr die Gültigkeit des Cookies in Tagen an. In diesem Fall wären es 7 Tage.

Lösung: Der ausgewählte Tab wird nachdem Reload wieder ausgewählt