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

Posted 2023-05-08

【中文标题】Bootstrap嵌套导航选项卡在重新加载时不会打开相同的选项卡

【英文标题】：Bootstrap nested nav tabs doesn't open same tab on reload

【发布时间】：2017-08-04 16:04:05

【问题描述】：

我有嵌套的导航标签，比如

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

谢谢。

【问题讨论】：

如果提供jsfiddle或者codepen会更好

【参考方案1】：

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

如果你想在这里测试它，你可以通过右键单击它并单击“重新加载框架”来重新加载 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>

【讨论】：

@Phoenix 所以你的代码中一定有影响行为的东西。你可以从这个 sn-p 重建你的项目。或者，如果您不介意，请提供您的完整代码，否则我们无法为您提供帮助。

我将重建我的代码，因为它有 2000 多行代码，所有导航选项卡 :) 所以这里没有必要分享。无论如何感谢您的帮助。

好的，如果您将嵌套选项卡放在第二个选项卡上，您的代码也将无法工作。只有当嵌套在第一个选项卡中时它才有效。

@Phoenix 我添加了一些脚本以使其工作。请尝试sn-p。

非常感谢。它适用于我的代码！在我接受你的回答后，我认为你不会尝试这个。非常感谢：D