Stay in the same tab after refreshing

after I refresh the page text1 appear(because its style in css is defined as display:block) but I want the last used tab. how can I do that. this is the jsp code

 

<button   id="cl1"  value="Мій профіль" onclick="tabs()" >Мій профіль</button>
    <button  id="cl2" value="Заявки" onclick="tabs()">Мої запити</button>
<button  id="cl3" value="Створити запит" onclick="tabs()">Створити запит</button>
    <div id="firstoption">
один
   </div>
   <div id="secondoption">
два
   </div>
   <div id="thirdoption">
три
   </div>
<script>
    function tabs(){
        const btnop1=document.getElementById("cl1");
        const btnop2=document.getElementById("cl2");
        const btnop3=document.getElementById("cl3");
       
        const text1=document.getElementById("firstoption");
        const text2=document.getElementById("secondoption");
        const text3=document.getElementById("thirdoption");
   
        btnop1.onclick=function (){
            text3.style.display="none";
            text2.style.display="none";
            text1.style.display="block";
        
        }
  btnop2.onclick=function (){
            text1.style.display="none";
            text3.style.display="none";
            text2.style.display="block";
          
        }
        btnop3.onclick=function (){

            text1.style.display="none";
            text2.style.display="none";
            text3.style.display="block";
        }
</script> 

CodePudding user response：

Upon reloading the tab, the changes you made to the CSS dynamically are gone. If you want persistence, you will need to use something like localStorage to save the state when pressing a button and load the state when your page is loaded.

CodePudding user response：

You must use something like the localstorage to persist any variable after reloadings

HTML

<button  id="cl1" value="Мій профіль" onclick="tabs()">
    Мій профіль
  </button>
<button  id="cl2" value="Заявки" onclick="tabs()">
    Мої запити
  </button>
<button  id="cl3" value="Створити запит" onclick="tabs()">
    Створити запит
  </button>
<div  id="firstoption">
  один
</div>
<div  id="secondoption">
  два
</div>
<div  id="thirdoption">
  три
</div>

JavaScript:

const text1 = document.getElementById('firstoption')
const text2 = document.getElementById('secondoption')
const text3 = document.getElementById('thirdoption')

const textStyles = JSON.parse(localStorage.getItem('textStyles'))
text3.style.display = textStyles.text3
text2.style.display = textStyles.text2
text1.style.display = textStyles.text1

function tabs() {
  const btnop1 = document.getElementById('cl1')
  const btnop2 = document.getElementById('cl2')
  const btnop3 = document.getElementById('cl3')

  btnop1.onclick = function() {
    text3.style.display = 'none'
    text2.style.display = 'none'
    text1.style.display = 'block'
    localStorage.setItem('textStyles', JSON.stringify({
      text3: text3.style.display,
      text2: text2.style.display,
      text1: text1.style.display
    }))
  }
  btnop2.onclick = function() {
    text1.style.display = 'none'
    text3.style.display = 'none'
    text2.style.display = 'block'
    localStorage.setItem('textStyles', JSON.stringify({
      text3: text3.style.display,
      text2: text2.style.display,
      text1: text1.style.display
    }))
  }
  btnop3.onclick = function() {
    text1.style.display = 'none'
    text2.style.display = 'none'
    text3.style.display = 'block'
    localStorage.setItem('textStyles', JSON.stringify({
      text3: text3.style.display,
      text2: text2.style.display,
      text1: text1.style.display
    }))
  }
}

CodePudding user response：

I believe, you can achieve this with JavaScript History Interface, where you would save current state of the route using History's methods.