Bootstrap tabs - Remember tab selected upon page refresh

Question

Is it possible to remember the current tab, be it parent or child, in nested tabs upon a page refresh? It's basically vertical tabs inside horizontal tabs as shown on the HTML code below. It currently works fine but it's just annoying that if the page is refreshed it just jumps back to Tab One.

I have a small piece of JS that can remember the current viewed tab upon a page refresh but this only works if tabs are not nested inside tabs. I've included this for reference after the HTML.

What I would like to be able to do is return the the child tab, say Sub Menu Item 3 which is inside of Tab Two if the user refreshes the page.

<div class="row">
  <div class="col-lg-12">

            <ul id="userTab" class="nav nav-tabs">
              <li class="active"><a href="#tabone" data-toggle="tab">Tab One</a> </li>
              <li><a href="#tabtwo" data-toggle="tab">Tab Two</a> </li>
            </ul>

            <div id="userTabContent" class="tab-content">

                <div class="tab-pane active" id="tabone">
                    <div class="row">
                      <h3>
                      This is the content for tab one
                      <h3>
                    </div>
                </div> <!-- tabone -->

                <div class="tab-pane" id="tabtwo">
                    <div class="row">
                          <div class="col-sm-2">
                            <ul id="subtabmenu" class="nav nav-pills nav-stacked">
                              <li class="active"><a href="#subtabmenu1" data-toggle="tab"> Sub Menu Item 1</a> </li>
                              <li><a href="#subtabmenu2" data-toggle="tab"> Sub Menu Item 2</a> </li>
                              <li><a href="#subtabmenu3" data-toggle="tab"> Sub Menu Item 3</a> </li>
                              <li><a href="#subtabmenu4" data-toggle="tab"> Sub Menu Item 4</a> </li>
                            </ul>
                          </div>
                          <div class="col-sm-10">
                            <div id="subtabmenuContent" class="tab-content">
                              <div class="tab-pane active" id="subtabmenu1"> This is the content for sub menu item 1 </div>
                              <div class="tab-pane" id="subtabmenu2"> This is the content for sub menu item 2 </div>
                              <div class="tab-pane" id="subtabmenu3"> This is the content for sub menu item 3 </div>
                              <div class="tab-pane" id="subtabmenu4"> This is the content for sub menu item 4 </div>
                            </div>
                          </div>
                    </div>
                </div> <!-- tabtwo -->

            </div> <!-- userTabContent -->

  </div> <!-- col-lg-12 -->
</div> <!-- row -->

<script>
$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});
</script>