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>

此时继续导航：关于投资组合博客联系

如何在当前正在浏览的页面下放置一行？因此，如果用户单击“投资组合”，则导航栏将如下所示：

关于投资组合博客联系

     ________

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>

.active {
    text-decoration:underline;
}

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

Answer 2

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

已修改为包含代码段

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

Answer 3

我是在静态网站上自动完成的！

我使用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");
}
});

这是解决问题的一种特别好的方法，因为您的菜单保持相同的网站范围，这对于网站范围的更新更有利。

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

3 个答案: