Browser go back to active div in previous page

I want to create a list of button where once clicked, it will shows the respective div as below. And in the div, there is a few links that user can click, and once they clicked the link and go back, it will bring them back to the previous div instead of the first default div. Codes as below.

<div class="tab">
    <a class="tablinks btn" href="#m0" id="t0">Item A</a>
    <a class="tablinks btn" href="#m1" id="t1">Item B</a>
    <a class="tablinks btn" href="#m2" id="t2">Item C</a>
    </div>
    
    <div class="tlist">
    <div id="m0" class="tdiv" style="display:block;">
    <a href="LinkA.html">LinkA</a></div>
    <div id="m1" class="tdiv" style="display:none;">
    <a href="LinkB.html">LinkB</a></div>
    <div id="m2" class="tdiv" style="display:none;">
    <a href="LinkC.html">LinkC</a></div>
    </div>

I have Javascript codes that will change the display from none to block when user clicked on the Item.

document.getElementById("m0").style.display = "block";

document.getElementById("t"+i).addEventListener('click',divStyle.bind(this,"m"+i),false);

function divStyle(num) {
  var i,tdiv,tablinks;
  tdiv = document.getElementsByClassName("tdiv");

  for (i=0;i<tdiv.length;i++) {
    tdiv[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(num).style.display = "block";
  Event.className += "active";
}

//print tab for Item
function printTab(itemnum) {  
  for (var y = 0; y < itemnum; y++) {    
    tabbtn = document.createElement("a");  
    tabbtn.classList.add("tablinks", "btn", "btn-secondary");  
    tabbtn.setAttribute("href", "#m" + y);  
    tabbtn.setAttribute("id", "t" + y);  

    if (y == 0) {   
      tabbtn.classList.add("tablinks", "btn", "btn-secondary", "active");  
    }  

    tabtxt = document.createTextNode("");  //print Item text here 
    tabbtn.appendChild(tabtxt);  
    document.getElementById("tab").appendChild(tabbtn);
  }

  //print div for Link
  function printLink(num) {

    var docFrag = document.createDocumentFragment(); 

    for (var i = 0; i < Object.keys(obj).length; i++) {  
      moddiv = document.createElement("div");  
      moddiv.setAttribute("id", "m" + num);  
      moddiv.setAttribute("class", "tdiv");  
      moddiv.style.display = "none";  
      
      for (var i = 0; i < Object.keys(obj).length; i++) {   
          /*do something here and put link of each item*/    
      }    
            
    moddiv.appendChild(docFrag);  
    document.getElementById("tlist").appendChild(moddiv);  
}

The problem I have now is that when LinkC is clicked, and user then pressed Back button in the browser, browser goes back to the link of the previous specific div, for example, page.html#m2 but shows div m0. I guess this is because I already set document.getElementById("m0").style.display = "block"; by default so it will always go to div m0 but is there other way to make sure the browser will go back to the previous specific div chosen?

My google finding shows people suggesting history.back() but that means I need to create a Back button but I do not want that. I am sure this is not a complicated issue but I can’t think anymore on how to solve this. Any help is very appreciated. Thank you!

Update: I tried to use history.back() and created a button but this also is not working as it still display div m0. 🙁

Update #2: Tried this on Firefox and it is working though. Is there another way to make sure it can work for different browser?

Answer

Please try the bellow code :

<div class="tab">
    <a class="tablinks btn active" href="#m0" id="t0">Item A</a>
    <a class="tablinks btn" href="#m1" id="t1">Item B</a>
    <a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<br>
<div class="tlist">
    <div id="m0" class="tdiv" style="display:block;">
    <a href="LinkA.html">LinkA</a></div>
    <div id="m1" class="tdiv" style="display:none;">
    <a href="LinkB.html">LinkB</a></div>
    <div id="m2" class="tdiv" style="display:none;">
    <a href="LinkC.html">LinkC</a></div>
</div>


<style>
    
    a{color:#333;text-decoration: none;background: #eee;border: 1px solid #333;border-radius:5px;padding:3px;}    
    .active{color:blue;background: #ccc;}

</style>



<script type="text/javascript">
    
   var tabSelect=(url)=>{
        console.log(url);
        let hs = url.split('#')[1]||'m0',ts = hs.split('m').join('t');        
        if(hs!=''){
            let tabcs = document.getElementsByClassName('tdiv');
            for(let tabc of tabcs){if(tabc.id){tabc.style.display='none';}}
            let tabhs = document.getElementsByClassName('tablinks');
            for(let tabh of tabhs){if(tabh.id){tabh.className="tablinks btn"}}
            let c = document.getElementById(hs);
            if(c){c.style.display = 'block';document.getElementById(ts).className="tablinks btn active"}
        }
    }

     window.onhashchange=(i)=>{tabSelect(i.newURL);}
     window.onload=()=>{tabSelect(location.href);}

</script>

Hope you will be fine with this code.

Advertisement

Answer