Question

我知道，这个问题已经多次提出过，但我没有找到100％可行的解决方案:(

我的问题如下：我有三个navtabs：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#menu1">Personendaten</a></li>
  <li><a data-toggle="tab" href="#menu2">Studienübersicht</a></li>
  <li><a data-toggle="tab" href="#menu3">Dokumente</a></li>
</ul>

<div class="tab-content">
  <div id="menu1" class="tab-pane fade in active">
  <!-- some code here -->
  </div>
  <div id="menu2" class="tab-pane">
    <!-- some code here -->
  </div>
  <div id="menu2" class="tab-pane">
    <!-- some code here -->
  </div>
 </div>

/** A solution I found on the internet */
// Javascript to enable link to tab
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    } 

    // Change hash for page-reload
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    })

在每个菜单中都有一个帖子，它调用一个php文件，通过url将一些post数据从menu1传输到menu2，从菜单2传输到菜单3。

我的问题是，当我打电话给http://domain.com/page.php#menu2时，它并没有奏效。通过我在互联网上找到的JavaScript代码，当点击此选项卡时，网址会显示＃menu2。

我的目标是，从php文件调用，将每个windows.location的menu1形式调用到新选项卡。实际上，我开始是这样的：window.location =＆＃34; /html/pages/page.php#menu2？variable1 =＆＃39; blabla＆＃39;;

但是windows.location只打开page.php，而不是特定的选项卡。

我发现，当我更改网址时，请按输入不做任何更改。但是当我更改URL时，按回车并重新加载页面，它可以工作。那么，我可以使用location.reload（）;某个地方达到我的目标？

我不明白，为什么bootstrap没有让这个工作......或者有什么简单的解决方案我不知道？

非常感谢你的回答，请原谅我的工作， RMTX99

Answer 1

if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}

此代码工作正常。使用url.split（＆＃39;＃＆＃39;），您可以将网址拆分为＆＃39;＃＆＃39;。所以，如果你这样做：

window.location="/html/pages/page.php#menu2?variable1='blabla';

您将拥有：

$('.nav-tabs a[href="#menu2?variable1='blabla'"]').tab('show');

这可能就是为什么它不起作用，您应该将您的网址更改为： page.php？variable1 =＆＃39; blabla＆＃39;＃menu2

通过url Bootstrap调用navtab

1 个答案: