bootstrap nav-tabs from navbar

Question

Hi I am trying to link to bootstrap nav-tabs from my navbar so that if the user is anywhere in the site the link will go to the page with the tabs, but also if they are on the page, the navbar will trigger a tab to open. I have the first part working ok, but the second part is giving me headaches. It is not detecting a hash change when the navbar link is clicked.

function navHash() {
    var hash = document.location.hash;
    if (hash) {
        history.pushState('', document.title, window.location.pathname);
        $('.nav-stacked a[href="'+hash+'"]').tab('show');
    }
}

$(document).ready(function() {
    navHash();
});

$(document).on('click', '.dropdown-menu>li>a', function() {
    navHash();
})

this is the HTML for the navbar:

<header>
  <nav class="navbar navbar-simple">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primaryNav">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href=""><img src="img/logo-svg.svg"></a>
      </div>
      <div class="collapse navbar-collapse" id="primaryNav">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="technology.html#tab-0">Tab 1</a></li>
              <li><a href="technology.html#tab-1">Tab 2</a></li>
              <li><a href="technology.html#tab-2">Tab 3</a></li>
              <li><a href="technology.html#tab-3">Tab 4</a></li>
              <li><a href="technology.html#tab-4">Tab 6</a></li>
              <li><a href="technology.html#tab-5">Tab 7</a></li>
            </ul>
          </li>
          <li><a href="investor.html">Nav 2</a></li>
          <li><a href="contact.html">Nav 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>