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();

哪种方法有效，但如果我想重新加载嵌套的navtab，则无效。

像：

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中。我删除了一些不必要的脚本。下面的代码也适用于独立的浏览器（头部和身体）。

如果您想在此处进行测试，可以右键单击iframe并点击“重新加载帧”，在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>

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

1 个答案: