Bootstrap nested nav tabs doesn't open same tab on reload

Question

I have nested nav tabs like

<div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
                <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>                                
            </ul>    
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane fade in active" id="tab1default"> 
                <div class="panel with-nav-tabs panel-default">
                    <div class="panel-heading">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#test1" data-toggle="tab">T 1</a></li>
                                <li><a href="#test2" data-toggle="tab">T 2</a></li>                                
                            </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="test1">Test 1</div>
                            <div class="tab-pane fade" id="test2">Test 2</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tab2default">Default 2</div>
        </div>
    </div>
</div>

Through javascript if I want to reload I do something like:

window.location.hash = "#tab2info";
location.reload();

Which works perfectly but if I want to reload nested navtab it doesn't work.

Like:

window.location.hash = "#test2";
location.reload();

That will not work.

Only main nav tabs reload are working but nested ones are not.

Another Solution I tried which has the same problem not working on nested nav tabs

<script type="text/javascript">
  $('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>

Thank You.

Answer 1

It seems that the reason why your code didn't work is that you forgot to add id="myTab" to a container dom. I removed some of your unnecessary script. The code below can also work in standalone browswer(with head and body).

If you want to test it here, you can reload the page in iframe by right clicking it and clicking "reload frame".

$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
console.log("hash",hash);

if (hash) {
  var target = $(`${hash}`);
  var targetLink = $(`#myTab a[href="${hash}"]`);
  var parentPanes=[];
  target.parentsUntil("body").each(function(){
    var $dom=$(this);
    if($dom.hasClass("tab-pane")&&$dom.attr("id")){
      parentPanes.push($dom.attr("id"));
    }    
  });
  parentPanes.reduceRight(function(pre,parentId){
    $(`#myTab a[href="#${parentId}"]`).tab('show');
  },"");
  targetLink.tab('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="blackmiaool's page">
<meta name="author" content="blackmiaool">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel with-nav-tabs panel-default" id="myTab">
  <div class="panel-heading">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
      <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
    </ul>
  </div>
  <div class="panel-body">
    <div class="tab-content">
      <div class="tab-pane fade in active" id="tab1default">
        <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#test1" data-toggle="tab">T 1</a></li>
              <li><a href="#test2" data-toggle="tab">T 2</a></li>
            </ul>
          </div>
          <div class="panel-body">
            <div class="tab-content">
              <div class="tab-pane fade in active" id="test1">Test 1</div>
              <div class="tab-pane fade" id="test2">Test 2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="tab2default">Default 2
        <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#test3" data-toggle="tab">T 1</a></li>
              <li><a href="#test4" data-toggle="tab">T 2</a></li>
            </ul>
          </div>
          <div class="panel-body">
            <div class="tab-content">
              <div class="tab-pane fade in active" id="test3">Test 1</div>
              <div class="tab-pane fade" id="test4">Test 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>