每次我尝试更改导航栏时，它都会加载一个页面，在顶部的一瞬间会出现一个白色栏，然后它就会消失。我该如何摆脱这个黑体
我把它放在下面的链接中，你可以看到它工作不正常，我在不同的浏览器中也看到了差异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>
导航.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>
很可能是因为您使用引导程序预定义的CSS元素，然后在加载头时覆盖它们。特别是类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中删除这两个标签，并将它们移动到index.html。然后决定要使用哪个jQuery脚本(因为index.html中已经有不同版本的jQuery脚本(。
如果需要，可以将navigation.js和navigation.css标记保留在navigation.html中。
这可能是因为您在此处将所有导航元素设置为黑色：
nav li a {
transition: 0s color ease-in-out;
color: black !important;
}
导入navigation.html时，这将使导航元素上的子元素变黑。