Stay in the same tab after refreshing

Question

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 class="btn special"  id="cl1"  value="Мій профіль" onclick="tabs()" >Мій профіль</button>
    <button class="btn" id="cl2" value="Заявки" onclick="tabs()">Мої запити</button>
<button class="btn" id="cl3" value="Створити запит" onclick="tabs()">Створити запит</button>
    <div class="tabShow"id="firstoption">
один
   </div>
   <div class="tabShow"id="secondoption">
два
   </div>
   <div class="tabShow"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> 

Answer 1

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.

Answer 2

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

HTML

<button class="btn special" id="cl1" value="Мій профіль" onclick="tabs()">
    Мій профіль
  </button>
<button class="btn" id="cl2" value="Заявки" onclick="tabs()">
    Мої запити
  </button>
<button class="btn" id="cl3" value="Створити запит" onclick="tabs()">
    Створити запит
  </button>
<div class="tabShow" id="firstoption">
  один
</div>
<div class="tabShow" id="secondoption">
  два
</div>
<div class="tabShow" 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
    }))
  }
}

Answer 3

我相信，您可以使用JavaScript History Interface来实现这一点，您可以使用 History 的方法保存路线的当前状态。