导航栏变黑

Question

每次我尝试更改导航栏时，它都会加载一个页面，并在一瞬间在顶部出现一个白色栏，然后它就消失了。我如何摆脱这个黑条

我把它放在下面link，你可以看到它不能正常工作，我也看到了不同浏览器的差异 https://stackblitz.com/edit/web-platform-zgajud?file=index.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <!-- <link rel = "stylesheet" href = "navigation.css" type = "text / css" /> -->
</head>


<body>


    <!-- <script type="text/javascript">
        $.get("navigation.html", function (data) {
            $("#nav-placeholder").replaceWith(data);
        });
    </script> -->


    <div id="nav-placeholder">

    </div>

    <script>
        $(function () {
            $("#nav-placeholder").load("navigation.html");
        });
    </script>

    <p class="lead">body1</p>
</body>

</html>

navigation.css

.hoverable {
  display: inline-block;
  /* backface-visibility: hidden; */
  vertical-align: middle;
  position: relative;
  /* box-shadow: 0 0 1px rgba(41, 121, 107, 0.452); */
  /* transform: translateZ(0); */
  /* transition-duration: 0.3s; */
  /* transition-property: transform; */
}

.hoverable:before {
  position: absolute;
  pointer-events: none;
  /* z-index: -1; */
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: .6;
  /* background: -webkit-radial-gradient(center, ellipse, rgba(167, 58, 58, 0.35) 80%, rgba(54, 138, 46, 0.39) 80%); */
  /* background: radial-gradient(ellipse at center, rgba(40, 80, 190, 0.35) 80%, rgba(255, 255, 255, 0) 80%); */
  /* W3C */
  transition-duration: 0.3s;
  /* transition-property: transform, opacity; */
}

.hoverable:hover, .hoverable:active, .hoverable:focus {
  transform: translateY(-5px);
  /* opacity: .9 !important; */
  color: black;
}

.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before {
  /* opacity:  1; */
  transform: translateY(0px);
}

@keyframes bounce-animation {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounce {
  animation-name: bounce-animation;
  animation-duration: 2s;
}

/*everything below here is just setting up the page, so dont worry about it */
@media (min-width: 768px) {
  .navbar {
    text-align: center !important;
    float: none;
    display: inline-block;
    border-color: transparent;
    /* border-bottom:2px solid rgba(0,0,0,.5);   */
  }
}
body {
  /* background-color: black; */
  font-weight: 600;
  text-align: center !important;
  /* color: white; */
}

nav {
  background: none !important;
  /* background-color: transparent; */
  text-transform: uppercase;
}
nav li {
  margin-left: 3em;
  margin-right: 3em;
}
nav li a {
  transition: 0s color ease-in-out;
  color: black  !important;
}

.page-title {
  opacity: 1.0 !important;
}

navigation.html

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<link rel = "stylesheet" href = "navigationoriginal.css" type = "text / css" />

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src = "navigation.js"></script> 
<div class="container-fluid">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li><a id="len1" class="hoverable" href="index.html">Home</a></li>
        <li><a id="len2" class="hoverable" href="body2.html">About</a></li>
        <li><a id="len3" class="hoverable" href="#">Portfolio</a></li>
        <li><a id="len4" class="hoverable" href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  <!-- <div id="what-the-hell-is-this">
    <div class="page-title">
      <h2>Simple Navigation</h2>
      <p class="lead">
        Based on Hover.css, the goal of this pen
        is to create a simple navigation bar <br />
        that can be easily reused in both mobile and native displays. Mouse over the nav text for animation!
      </p>
    </div>
  </div> -->
</div>

Answer 1

很可能是因为您正在使用 bootstrap pre-defined CSS 元素，然后在 header 加载时覆盖它们。特别是 class navbar-inverse，它将 nav 元素涂成黑色。你不需要它，因为你实际上并没有使用它。

导致闪烁的其他原因：您正在 navigation.html 中加载大量依赖项 - 这些都需要一些时间才能下载。更不用说您正在该文件中再次下载 jQuery 库（它已经加载到 index.html）。

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

从 navigation.html 中删除这 2 个标签并将它们移动到 index.html。然后决定要使用哪个 jQuery 脚本（因为 index.html 中已有不同版本的脚本）。

如果需要，您可以在 navigation.html 中留下 navigation.js 和 navigation.css 标签。

Answer 2

可能是因为您在此处将所有导航元素设置为黑色：

nav li a {
  transition: 0s color ease-in-out;
  color: black  !important;
}

当导入 navigation.html 时，这会使导航元素上的子元素变黑。

导航栏变黑

navigation bar turns black

html

javascript

navigation

codepen