Recently, I came across a theme that intrigued me: . My goal is to utilize local storage in order to maintain the active tab even when the page is refreshed. However, I've encountered an issue where the site continues to display previous content and tabs even after clicking on a new tab.
$(document).ready(function(){
$("#tab-1").click(function() {
window.localStorage.setItem("tab", "tab-1");
window.localStorage.setItem("content", "tab-dashboard");
$( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
$( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});
$("#tab-2").click(function() {
// Store
window.localStorage.setItem("tab", "tab-2");
window.localStorage.setItem("content", "tab-workhours");
$( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
$( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});
$("#tab-3").click(function() {
// Store
window.localStorage.setItem("tab", "tab-3");
window.localStorage.setItem("content", "tab-my-profile");
$( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
$( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});
$("#tab-4").click(function() {
window.localStorage.setItem("tab", "tab-4");
window.localStorage.setItem("content", "tab-admin");
$( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
$( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});
$("#tab-5").click(function() {
window.localStorage.setItem("tab", "tab-5");
window.localStorage.setItem("content", "tab-company");
$( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
$( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});
function defaultTab(){
var defaultTabName = document.getElementById("tab-1");
}
function getTab(){
var item = window.localStorage.getItem("tab");
console.log(item);
return item;
}
function getContent(){
var item = window.localStorage.getItem("content");
console.log(item);
return item;
}
function activeTab(){
console.log(getTab());
if(false){
defaultTab();
}else{
//var activatedTabName = document.getElementById("" + getTab())
$( "#" + getTab() ).addClass( "cd-tabs__item--selected" );
$( "#" + getContent() ).addClass( "cd-tabs__panel--selected" );
window.localStorage.removeItem("content");
window.localStorage.removeItem("tab");
}
}
activeTab();
});
I'm looking for a solution that allows me to click on the last tab displayed from local storage. How can this functionality be implemented?
Below is the HTML structure:
<nav class="cd-tabs__navigation">
<ul class="cd-tabs__list" id="myTab">
<li>
<a href="#tab-dashboard" class="cd-tabs__item cd-tabs__item--selected" style="padding: 6px;" id="tab-1">
<img src="images/dashboard.png" width="50px" height="50px" style="padding: 6px;">
</a>
</li>
<li>
<a href="#tab-workhours" class="cd-tabs__item" id="tab-2">
<img src="/images/working-hours.png" width="50px" height="50px" style="padding: 6px;"/>
</a>
</li>
<li>
<a href="#tab-my-profile" class="cd-tabs__item" id="tab-3">
<img src="/images/user.png" width="50px" height="50px" style="padding: 6px;"/>
</a>
</li>
<li>
<a href="#tab-admin" class="cd-tabs__item" id="tab-5">
<img src="/images/settings.png" width="50px" height="50px" style="padding: 6px;"/>
</a>
</li>
<li>
<a href="#tab-company" class="cd-tabs__item" id="tab-5">
<img src="/images/company.png" width="50px" height="50px" style="padding: 6px;"/>
</a>
</li>
</ul> <!-- cd-tabs__list -->
</nav>
<ul class="cd-tabs__panels">
<li id="tab-dashboard" class="cd-tabs__panel cd-tabs__panel--selected text-component">
<!-- some content -->
</li>
<li id="tab-workhours" class="cd-tabs__panel text-component">
<!-- some content -->
</li>
<li id="tab-my-profile" class="cd-tabs__panel text-component">
<!-- some content -->
</li>
<li id="tab-admin" class="cd-tabs__panel text-component">
<!-- some content -->
</li>
<li id="tab-company" class="cd-tabs__panel text-component">
<!-- some content -->
</li>
</ul> <!-- cd-tabs__panels -->