在当前页面上填充导航栏链接
我目前正在尝试创建一个导航栏，当它悬停在链接上时填充。不过，我还希望在相关页面上填充（或突出显示）链接。任何帮助将非常感激！在当前页面上填充导航栏链接
注意：这段代码已经从开源中检索出来。我是一个新的Web技术学习者并且正在为Web项目工作。
/*NAVIGATION */
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 100vh;
}
nav {
width: 60%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
@-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
<h2>Nav bar test</h2>
<nav class="fill">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Downloads</a>
</li>
<li><a href="#">More</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</section>
最佳做法是将“活动”类添加到当前页面按钮。
<li><a href="index.html" class="active">Home</a></li>
并将“a.active”添加到您已拥有的每个“a：hover”中，以便它具有相同的css。
nav.fill ul li a:hover,
nav.fill ul li a.active { /* Here */
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after { /* Here */
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after { /* Here */
width: 100%;
}
下面是一个的jsfiddle活生生的例子：https://jsfiddle.net/884o5sjs/ （要获得帮助更快，记得要创建自己的jsfiddle下一次）
您可以用动态的添加类=“活动”到当前页面PHP（建议）或甚至使用jQuery（不建议），但由于它看起来像你使用“.html”，你将不得不在每个页面上手动添加它。
希望这会有所帮助。
看起来你已经取得的成绩有它突出徘徊的时候你的首要任务。我会在php中这样做，因为这是我最舒服的语言，但是你也必须在你的计算机上运行一个web服务器，希望你能从这里的一些Jscript专业人员那里获得更多有用的技巧。如果你不得不求助于php，我常用的一种方法是在页面上放置一个变量，让页眉知道你正在浏览哪个页面，然后有一些if语句可以响应和应用.current-page样式。
我可能做了很长的路，但我还没有学会Javascript。
if语句看起来像这样在ul的导航里... <li <?php if ($title == "Home) { echo "class='current-page'"; } ?>><a href="#">Home</a>等等对于ul中的每个元素都带有相应的标题和标题声明在页面的主体中。
谢谢@david然而，正如你所说，我很感激你的帮助提示，在php中这样做会困难得多。 – dizzL
非常感谢@xWaZzo！这是一个非常丰富的信息，正是我所期待的。我会记得下次创建一个jsfiddle现场示例，对此还是新的。 – dizzL
不客气:) – xWaZzo