I am trying to keep selected tab active on refresh with css and js. Tried and checked with some question already been asked here but none of work for me. Don't know what to do. html code:
<div class="container">
<div class="title">Machine learning : Prediction ET0 </div>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'daily')" id="defaultOpen">Journalier</button>
<button class="tablinks" onclick="openCity(event, 'hourly')">Horaire</button>
<button class="tablinks" onclick="openCity(event, 'Exdaily')">Excel journalier</button>
<button class="tablinks" onclick="openCity(event, 'Exhourly')">Excel Horaire</button>
</div>
<script>
function openCity(evt, data) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(data).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
You have to save the information about which tab should be active (or if a tab should be active at all) somewhere the browser can access it. There are multiple ways to achieve this via the client-side storage.
I would recommend to save the data in the browsers localStorage:
// Execute this when a tab is clicked. `index` is the index of the clicked tab
// but you are free to use whatever identifier you like.
window.localStorage.setItem('activeTabIndex', index);
Note: Saving the index might not be the best approach since the order of tabs could change. Try to find an identifier that is unique and unlikely to change.
Then, on page load retrieve the saved data and "activate" the respective tab:
const activeTabIndex = window.localStorage.getItem('activeTabIndex');
if (activeTabIndex) {
// localStorage values are saved as strings so we have
// to convert `activeTabIndex` to a number first.
document.querySelectorAll('.tablinks')[Number(activeTabIndex)].classList.add('active');
}
You can use local storage to store active tab and call function on page reload and set the button id with tab data string.
<div class="container">
<div class="title">Machine learning : Prediction ET0 </div>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'daily')" id="daily">Journalier</button>
<button class="tablinks" onclick="openCity(event, 'hourly')" id="hourly">Horaire</button>
<button class="tablinks" onclick="openCity(event, 'Exdaily')" id="Exdaily">Excel journalier</button>
<button class="tablinks" onclick="openCity(event, 'Exhourly')" id="Exhourly">Excel Horaire</button>
</div>
window.onload = function () {
const activeTab = localStorage.getItem("activeTab");
if(activeTab){
// here your logic comes to show that specific tab add or remove class
}
}
Set the current tab on click event function like this
localStorage.setItem("activeTab",data);
Comment below for any query thanks