html - 如何在导航栏上当前正在查看的页面下方添加一行？

Question

我有一个导航是这样的代码:

<div id="nav" class="ten columns">
<ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

现在导航如下:关于 Portfolio Blog Contact

如何在当前正在查看的页面下方添加一行？因此，如果用户单击 Portfolio，则导航栏将如下所示:

关于投资组合博客联系人

     ________

Answer 1

通常，这是使用服务器端软件向选定的导航项添加类来实现的。然后，设置该类的样式，使其具有底部边框。您可以将其设置为所有页面都具有相同宽度的底部边框，但所选元素的边框与其他元素的边框不同(哪个边框至少应该“看起来”是透明的)。

编辑以包含代码片段

<div id="nav" class="ten columns">
  <ul>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<style type="text/css">
div#nav > ul > li {
  border-bottom: 2px solid white;
}
div#nav > ul > li.active {
  border-bottom: 2px solid black;
}
</style>