Maintain active tab through multiple page loads

by Akram kamal

HTML

<ul class="links">
  <li><a href="link-1.html">Page 1</a></li>
  <li><a href="link-2.html">Page 2</a></li>
  <li><a href="link-3.html">Page 3</a></li>
</ul>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">First tab content</div>
  <div id="tabs-2">Second tab content</div>
  <div id="tabs-3">Third tab content</div>
</div>
<button>
  refresh
</button>

JavaScript

var hashTab = window.location.hash;
var activeTab = 0;
if (hashTab.length > 0) {
  activeTab = $('a[href^="#tabs-"]').index($('a[href="' + hashTab + '"]'));
}

console.log(activeTab)
hashLinks()

$("#tabs").tabs({
  active: activeTab,
  activate: function(event, ui) {
    location.hash = ui.newTab.find("[href]").prop("hash")
    console.log(location.hash)
    hashLinks()
  }
})

function hashLinks() {
  $(".links a").prop("hash", location.hash)
}
$("button").click(function() {
  location.reload(true)
})