Remember last clicked tab on page refresh

Question

been trying to make the browser remember last active tab but couldn't get it right.

function ShowMyDiv(Obj){
  var elements = document.getElementsByTagName('div');
 for (var i = 0; i < elements.length; i++) 
  if(elements[i].className=='tabcontent')
   elements[i].style.display= 'none';

 document.getElementById(Obj.rel).style.display= 'block';
 //------------------------------------

  var ul_el = document.getElementById('mytab_ul');
  var li_el = ul_el.getElementsByTagName('li');
 for (var i = 0; i < li_el.length; i++) 
  li_el[i].className="";

 Obj.parentNode.className="selected";
}

JAVASCRIPT

<ul id="mytab_ul" class="mytabs">
    <li class="selected"><a rel="tab_data" href="#data" onclick="javascript:ShowMyDiv(this);">Data</a></li>
    <li class=""><a rel="tab_vtu" href="#vtu" onclick="javascript:ShowMyDiv(this);">Vtu</a></li>
    <li class=""><a rel="tab_cabletv" href="#ctv" onclick="javascript:ShowMyDiv(this);">CTv</a></li>
    <li class=""><a rel="tab_nepa" href="#npa" onclick="javascript:ShowMyDiv(this);">NPA</a></li>
    <li class=""><a rel="tab_exampin" href="#pin" onclick="javascript:ShowMyDiv(this);">Pin</a></li>
    <li class=""><a rel="tab_spectranet" href="#spectranet" onclick="javascript:ShowMyDiv(this);">Spectranet</a></li>
    <li class=""><a rel="tab_smile" href="#smile" onclick="javascript:ShowMyDiv(this);">Smile</a></li>
    <li class=""><a rel="tab_a2cash" href="#cash" onclick="javascript:ShowMyDiv(this);">Cash</a></li>
</ul>

HTML

How can i do this please?

I have tried adding this to my JS

var selectedTab =  window.location.href.split("#")[1] ;
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('rel');

    if (typeof selectedId === "undefined") {
         $('#tab_data').trigger("click");
    }
    else{
        $('#'+selectedId).trigger("click");
    }

Still didn't work

Duplicate of [How can I keep selected Bootstrap tab on page refresh?](https://stackoverflow.com/questions/18999501/how-can-i-keep-selected-bootstrap-tab-on-page-refresh) — MrUpsidown, Mar 21 '23 at 07:56

score -1 · Answer 1 · answered Mar 21 '23 at 06:35

-1

How about make use of the browser's localstorage ? on click the tab you can set the item:

localstorage.setItem("activeTab", tabId)

on the page load you can get the item

 localstorage.getItem("activeTab")

ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

answered Mar 21 '23 at 06:35

Adi L

41
2
10

Could you please check https://codepen.io/Ogmic/pen/poOxobw – Michael Mar 21 '23 at 06:55
Please avoid answering questions that have already been answered. – MrUpsidown Mar 21 '23 at 07:59
1

@Michael please check codepen https://codepen.io/adi-dui-levy/pen/LYJgEXx – Adi L Mar 21 '23 at 08:48
@MrUpsidown oh apologies!, when i began writing my response, there were no other ansers posted yet – Adi L Mar 21 '23 at 08:57
That's not really what I meant... This question has been asked before (it is a duplicate - see my comment on the question itself). It is fine to post an answer when there is already an answer, if your answer ads something to the existing one(s). But if a question is an exact duplicate of an older one that has been answered already, it should be closed as a duplicate, and not answered again. – MrUpsidown Mar 21 '23 at 09:35
@MrUpsidown my apologies, i didn't know there was an already existing question. However, it still wouldn't have solved it. @ AdiL Thanks, i really appreciate your help. – Michael Mar 21 '23 at 13:35
@Michael why is that? – MrUpsidown Mar 21 '23 at 13:56

Remember last clicked tab on page refresh

1 Answers1