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>
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.
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
}))
}
}
I believe, you can achieve this with JavaScript History Interface, where you would save current state of the route using History's methods.