Hello - I want to remember tab states if user refreshess page or leaves page and returns, I believe it is done with localStorage, although I can find loads of jQuery examples I’m struggling to find a Vanilla JS example, can anyonehelp with this please?:
<html>
<head>
<meta charset="utf-8">
<style>
.red {
background: red;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="bar blue">
<button class="bar-item button tablink red" onclick="openTab(event,'Summary')">Summary</button>
<button class="bar-item button tablink" onclick="openTab(event,'Finance')">Finance</button>
<button class="bar-item button tablink" onclick="openTab(event,'Enquire')">Enquire</button>
<button class="bar-item button tablink" onclick="openTab(event,'Save')">Save</button>
</div>
<div id="Summary" class="container border vehTab"> FIRST TAB </div>
<div id="Finance" class="container border vehTab" style="display:none"> SECOND TAB </div>
<div id="Enquire" class="container border vehTab" style="display:none"> THIRD TAB </div>
<div id="Save" class="container border vehTab" style="display:none"> FOURTH TAB </div>
</div>
<script>
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("vehTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace("red", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " red";
}
</script>
</body>
</html>