页面刷新或按钮提交后保持标签页打开

Question

I am trying to keep the current tab open after submitting a form or refreshing the page but I am unable.

I already saw a tone of answers regarding this issue but my case is a bit different because I did not use ul and li or even a href on my tabs. I used buttons. Below is my code:

HTML

   <div class="tab">
       <button class="tablinks colora" onclick="tabsetting(event, 'London')" id="defaultOpen">General settings</button>
       <button class="tablinks color1" onclick="tabsetting(event, 'Paris')">Attendance sheet settings</button>
       <button class="tablinks color0" onclick="tabsetting(event, 'Tokyo')">Certificate settings</button>
       <button class="tablinks color01" onclick="tabsetting(event, 'Douala')">Certificate templates</button>
   </div>

<div id="London" class="tabcontent">
</div>

Javascript

  function tabsetting(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

How do I get the current tab to remain open after page refresh or form submit which is inside one of the tabs?

Answer 1

Hi I found a solution to my question. I am pasting it here for anyone to learn:

$('.tablinks').click(function(){

var activetab = $(this).attr('id');


 localStorage.setItem('activetab', activetab );
  

});

$(function() {  //short hand for $(document).ready()
var activetab = localStorage.getItem('activetab');

document.getElementById(activetab).click();
});