Zapamiętywanie ostatnio klikniętego taba nawet po odświeżeniu strony.

Question

Witam, potrzebuję pomocy z tabami. Taby przedstawione na zdjęciu są zrobione za pomocą funkcji i mam takie pytanie, jak zrobić żeby po odświeżeniu strony automatycznie zapamiętywała ona, który tab ma klasę active. Czyli jeżeli kliknę na Blog i odświeżę stronę to żeby ta klasa active była dalej na blogu. Prawdopodobnie będzie to coś z ciasteczkami cookie chociaż nie jestem pewny. Proszę o pomoc :)

Answer 1

localStorage

Comments

Super, a jakaś podpowiedź jak to zgrać z tymi tabami? :p

---

Np. Po kliknięciu na tab dodaj jego id do logalStorage, a po odświeżeniu strony sprawdzaj co jest w localStorage i na tej podstawie dodaj klase active ?

---

Ok wielkie dzięki, postaram się to zrobić.

---

Mam coś takiego: 

$(document).ready(function () {

    $('a.tab').on('click', function (e) {
        var currentID = $( this ).attr("id");
        localStorage.setItem('active', currentID);

    });
    
    var activeTab = localStorage.getItem('active');
    if (activeTab!="") {
        $("#"+activeTab ).addClass('active');
    }

});

Problem polega na tym, że potrzebuję zrobić to tak aby po kliknięciu na wybraną pozycję zmieniał się całkiem inny div.

Po kliknięciu w zielony obszar (wybrany z tabów) chcę aby zmieniał się cały kontener zaznaczony na rózówo. Ma ktoś jakieś pomysły?

---

Nie wiem czy dobrze rozumiem, ale: 

    $('zielonyObszar').on('click', function (e) {
const nowyHtml = '<div>costam</div>';
$('rozowyObszar').html(nowyHtml);
});

 

---

Wiesz co nie do końca o to, już tłumaczę. 

Menu:

<div class="tabs">
	<a href="#lista-truckow" class="localStorage red">Lista Trucków</a>
	<a href="#blog" class="localStorage white">Wpisy na blogu</a>
</div>

Artykuły:

<div class="tabs-container test">
	<article id="lista-truckow" class="tab-content active">
		...
	</article>

	<article id="blog" class="tab-content">
		...
	</article>
</div>

Chciałem zrobić tak, że po kliknięciu w menu np. na pozycję 2 (blog) dodaję mi do artykułu z id "blog" klasę active, a z pozostałych artykułów zabiera tą klasę i tak zrobiłem. Teraz potrzebuję właśnie skryptu localStorage aby zapamiętało, który artykuł ostatnio miał tą klasę active.