How to keep the same tab open after refresh javascript / css-CodePudding

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 >
      <div >Machine learning : Prediction ET0 </div>
      <div >
        <button  onclick="openCity(event, 'daily')" id="defaultOpen">Journalier</button>
        <button  onclick="openCity(event, 'hourly')">Horaire</button>
        <button  onclick="openCity(event, 'Exdaily')">Excel journalier</button>
        <button  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>

CodePudding user response：

localStorage is a store of key-value data that is saved across browser sessions. You can use it to save the active tab on every change, and after refresh the data will be saved. Data should not be a primitive type.

// The name active-tab is arbitrary.

localStorage.getItem("active-tab"); // Data should be identifier for the active tab.

localStorage.setItem("active-tab", activeTab); // Set new active tab identifier

// Example: this code sets a default value for active tab, so localStorage will always have a value:
var activeTab = localStorage.getItem("active-tab");
if (!activeTab) {
  localStorage.setItem("active-tab", activeTab);
}

To identify the tabs you should add for then ids, class or something else.

CodePudding user response：

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 >
      <div >Machine learning : Prediction ET0 </div>
      <div >
        <button  onclick="openCity(event, 'daily')" id="daily">Journalier</button>
        <button  onclick="openCity(event, 'hourly')" id="hourly">Horaire</button>
        <button  onclick="openCity(event, 'Exdaily')" id="Exdaily">Excel journalier</button>
        <button  onclick="openCity(event, 'Exhourly')" id="Exhourly">Excel Horaire</button>
      </div>

Your Script should be like this

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

CodePudding user response：

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');
}