CODEWITHSUNDEEP
javascriptbootstrap-5jquery-ui-tabs
Michael
Michael

Reputation: 90

Remember last clicked tab on page refresh

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

Upvotes: -1

Views: 132

Answers (1)

Adi L
Adi L

Reputation: 41

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

Upvotes: -1

Related Questions