javascript - Bootstrap 嵌套导航选项卡不会在重新加载时打开相同的选项卡

Question

我有像这样的嵌套导航标签

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

如果我想通过 javascript 重新加载，我会做类似的事情:

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

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

喜欢:

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>

谢谢。

Answer 1

您的代码不起作用的原因似乎是您忘记将 id="myTab" 添加到容器 dom。我删除了一些你不必要的脚本。下面的代码也可以在独立的浏览器中工作(有头部和 body )。

如果你想在这里测试它，你可以通过右键单击它并单击“重新加载框架”来重新加载iframe中的页面。

$("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>