Javascript 引导嵌套导航选项卡不'；重新加载时不能打开相同的选项卡

我有嵌套的导航选项卡，如

<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>

它工作得很好，但是如果我想重新加载嵌套的导航选项卡，它就不工作了。

比如：

那是行不通的

只有主导航选项卡重新加载工作，但嵌套选项卡不工作。

我尝试过的另一种解决方案也有相同的问题，即不使用嵌套的导航选项卡

<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>

$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
});
//将当前选定的选项卡存储在哈希值中
$（“ul.nav-tabs>li>a”）。打开（“所示的.bs.tab”，功能（e）{
var id=$（e.target）.attr（“href”）.substr（1）；
window.location.hash=id；
});
//加载页面时：切换到当前选定的选项卡
var hash=window.location.hash；
$（'#myTab a[href=“”+hash+'“]”）。tab（'show'）；

---

谢谢。

您的代码不起作用的原因似乎是您忘记将id=“myTab”添加到容器dom中。我删除了一些不必要的脚本。下面的代码也可以在独立浏览器中使用（头部和身体）

如果要在此处进行测试，可以在iframe中重新加载页面，方法是右键单击该页面，然后单击“重新加载框架”

$（“ul.nav-tabs>li>a”）。打开（“所示的.bs.tab”，功能（e）{
var id=$（e.target）.attr（“href”）.substr（1）；
window.location.hash=id；
});
//加载页面时：切换到当前选定的选项卡
var hash=window.location.hash；
log（“散列”，散列）；
if（散列）{
var target=$（`${hash}`）；
var targetLink=$（`myTab a[href=“${hash}”]`）；
var parentPanes=[]；
target.parentsUntil（“body”）.each（function（）{
var$dom=$（这个）；
if（$dom.hasClass（“选项卡窗格”）和&$dom.attr（“id”））{
parentPanes.push（$dom.attr（“id”）；
}    
});
parentPanes.reduceRight（函数（pre，parentId）{
$（`myTab a[href=“\${parentId}]”）.tab（'show'）；
},"");
targetLink.tab（'show'）；
}

测试页








测试1
测试2
默认值2




测试1
测试2

如果您提供JSFIDLE或codepen@Phoenix因此，您的代码中一定有影响行为的内容。您可以从该代码段重建项目。或者如果你不介意，请给出你的完整代码，否则我们无法帮助你。我将重新生成我的代码，因为它有2000多行代码（所有导航选项卡：），所以这里没有共享的意义。无论如何，谢谢你的帮助。好的，如果你把嵌套的标签放在第二个标签上，你的代码也会失败。只有当嵌套在第一个选项卡中时，它才起作用。@我添加了一些脚本使其起作用。请尝试一下这个片段。非常感谢你。它在我的代码中工作！我没想到在我接受你的答案后你会这么做。非常感谢

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

<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>