Struggling to find a way for the browser to remember the last active tab but haven't been successful.
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
Can anyone guide me on how to achieve this?
I attempted to include this in my JS code
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");
}
But it still didn't work as expected