Properly react to hash changes and navigation

pages/jobs.tmpl

 title=Working at Eyeo
 
 {% set openings = ("HR Manager", "C++ Developer", "Web Developer", "Android Developer", "DevOps Engineer", "PR Intern") %}
 {% macro slugify(title) %}{{ title|lower|replace(" ", "-") }}{% endmacro %}
 
 <script src="/js/jquery.ui.core.min.js"></script>
 <script src="/js/jquery.ui.widget.min.js"></script>
 <script src="/js/jquery.ui.tabs.min.js"></script>
 <script>
   jQuery(function()
   {
     jQuery(
       "ul:first", jQuery("#tabs-openings").tabs(
       {
         activate: function(event, ui)
         {
-          location.hash = ui.newTab.find("a")[0].hash;
+          var hash = ui.newTab.find("a")[0].hash;
+          if (hash != "#jobs-overview")
+            location.hash = hash;
         }
       })
     ).addClass("ui-tabs-nav-vertical");
 
     jQuery("#tabs-details").tabs();
+
+    jQuery(window).on("hashchange", function()
+    {
+      var hash = location.hash != "" ? location.hash : "#jobs-overview";
+      var escapedHash = hash.replace(/\+/g, "\\+");
+      jQuery("[href=" + escapedHash + "]").click();
+    });
   });
 </script>
 
 
 <header class="page-title">
   <h1>Working at Eyeo</h1>
 </header>
 
 <div id="jobs-info" class="content-block">
   <div id="tabs-openings" class="columns-container one-sidebar">
@@ skipping 42 matching lines @@
           <div id="{{ slugify(title) }}">
             <h2>{{ title }}</h2>
             <? include jobs/openings/{{ slugify(title) }} ?>
             <a href="mailto:jobs@eyeo.com"><button>apply now</button></a>
           </div>
         {% endfor %}
       </div>
     </div>
   </div>
 </div>