Browser go back to active div in previous page

All we need is an easy explanation of the problem, so here it is.

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t0">Item A</a>
    <a class="tablinks btn" href="#m1" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t1">Item B</a>
    <a class="tablinks btn" href="#m2" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t2">Item C</a>
    </div>
    
    <div class="tlist">
    <div id="m0" class="tdiv" style="display:block;">
    <a href="LinkA.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">LinkA</a></div>
    <div id="m1" class="tdiv" style="display:none;">
    <a href="LinkB.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">LinkB</a></div>
    <div id="m2" class="tdiv" style="display:none;">
    <a href="LinkC.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Please try the bellow code :

<div class="tab">
    <a class="tablinks btn active" href="#m0" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t0">Item A</a>
    <a class="tablinks btn" href="#m1" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t1">Item B</a>
    <a class="tablinks btn" href="#m2" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="t2">Item C</a>
</div>
<br>
<div class="tlist">
    <div id="m0" class="tdiv" style="display:block;">
    <a href="LinkA.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">LinkA</a></div>
    <div id="m1" class="tdiv" style="display:none;">
    <a href="LinkB.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">LinkB</a></div>
    <div id="m2" class="tdiv" style="display:none;">
    <a href="LinkC.html" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply