javascript - 修复了导航栏隐藏 Bootstrap 中的内容的问题

Question

我修复了使用选项卡时隐藏内容的导航栏。当我不在选项卡之间导航时，导航栏会正确显示，当我单击一个选项卡时，导航栏会隐藏包括选项卡标题在内的内容。

单击其中一个选项卡后，内容将被隐藏。

我尝试使用此功能，但仅在不在选项卡之间导航时才有效。

body{
margin-top: 80px;
}

伙计们，这是我在jsfiddle上的例子我认为造成这种情况的原因可能是我的 JavaScript，当我不使用 hash 时，它工作正常。当用户刷新页面时，我需要哈希，最后打开的选项卡需要处于事件状态。

 $('#sign-up-tabs 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;
$('#sign-up-tabs a[href="' + hash + '"]').tab('show');

已解决:我通过将代码更改为以下内容解决了这个问题。

$('#sign-up-tabs').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
   window.location.hash = $(this).attr('href');
  $(this).tab('show');
 });
// on load of the page: switch to the currently selected tab
  var hash = window.location.hash;
 $('#sign-up-tabs a[href="' + hash + '"]').tab('show');

on jsfiddle

Answer 1

您必须更改导航栏容器才能使用 display: block。

如果它还没有在容器内，您应该将其放入 div 内，它可能会像魅力一样工作。

例如，如果您使用:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <!-- the rest of your code -->
  </div>
</nav>

您应该将其更改为:

<div style="height: 80px">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <!-- the rest of your code -->
    </div>
  </nav>
</div>