Html 如何在导航栏上当前正在查看的页面下方放置一行？

我有一个导航，它是以下代码：

<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>

---

将活动类添加到当前列表元素

<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>

.active {
    text-decoration:underline;
}

.主动{
文字装饰：下划线；
}

---

如果您的站点是静态站点，则必须手动操作，否则您可以利用CMS预构建的类。

通常，这是使用服务器端软件来实现的，以便将类添加到所选的导航项中。然后，设置该类的样式，使其具有底部边框。您可以对其进行设置，使所有页面具有相同宽度的底部边框，但所选项目上的边框与其他项目上的边框不同（该边框至少应“显示”为透明）

编辑以包含代码段

<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>

分区导航>ul>li{
底部边框：2件纯白；
}
div#nav>ul>li.active{
底部边框：2件纯黑；
}

我在静态站点上自动执行此操作

我使用javascript和jQuery获取文档URL。然后在我的菜单中搜索每个

href

，并将一个类添加到与文档URL匹配的类中。在本例中，添加的类是

.activestyle

，可以按照您喜欢的方式进行样式设置

var urlname = (document.URL.substring(document.URL.lastIndexOf("\/")+1));

$('#menu ul li').each(function () {
if( $(this).html().indexOf('"'+urlname+'"')!=-1 ){
        $(this).children('a').addClass("activestyle");
}
});

---

这是一个特别好的解决问题的方法，因为您的菜单在整个站点范围内保持不变，这对站点范围的更新更有利。

有没有办法将“更多”一词的行隔开？您可以使用底部边框解决方案，然后将该类添加到元素中，并使用padding bottom:10px或任何适合您的值。该代码是否在所有导航项下面放一行？我做错什么了吗？简单地复制并粘贴到insideMaybe its中，因为我还没有在服务器上运行它。而且链接的HREF目前只是“#”，而不是真正的页面链接。谢谢你，伙计。@jamesjames94我没有所有的代码，所以我不知道你的背景是什么颜色。如果背景为白色，则

div#nav>ul>li上的
边框颜色应为白色；如果您的背景为栗色，则
div#nav>ul>li
上的
边框颜色应为栗色。您可以将
div#nav>ul>li上的
border color
设置为
transparent
，但我记得在浏览器兼容性方面存在问题。是否必须在所有导航项上激活该类？请查看上面的代码片段。所有链接都具有相同的
href
：
#
。当然，这个答案可能在其他情况下也适用，但在上述情况下就不行了。有时，你必须对一个问题做出假设。我想在以后的某个日期，@jamesjames94将用正确的HREF填充他的菜单。例如about.html、portfolio.html等。我一直使用这个。工作起来就像一个charmEven如果他的href都一样，这是一个优雅的问题解决方案，
href
可以替代每个菜单项html中的另一个区别因素。
var urlname = (document.URL.substring(document.URL.lastIndexOf("\/")+1));

$('#menu ul li').each(function () {
if( $(this).html().indexOf('"'+urlname+'"')!=-1 ){
        $(this).children('a').addClass("activestyle");
}
});