HTML + CSS 导航栏高亮当前页面答案

【问题标题】：HTML + CSS navigation bar highlighting current pageHTML + CSS 导航栏高亮当前页面
【发布时间】：2015-05-06 09:50:27
【问题描述】：

所以我一直在开发一个网站，现在想让导航栏突出显示您所在的当前页面，我尝试在该网站上搜索已回答的问题，但它们的代码看起来都与我的完全不同，所以我想我'问一下。

现在我有一个格式化列表的类，并尝试为主页列表项添加一个类：

<ul class="menu">
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact us</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li><a href="feedback.html">Feedback</a></li>
    <li><a href="#">placeholder</a></li>
</ul>

css 部分如下所示：

.menu
{
background-color: #91BD4A;
padding: 0;
margin: 0;
}
.menu ul 
{
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}

.menu li 
{
display: inline;
list-style: none;
}
.menu a:link, a:visited 
{
display: inline-block;
margin-right: -6px;
width: 140.7px;
color: #000 !important;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #91BD4A !important;
}

.menu a:hover, a:active
{
text-decoration: underline;
background-color: #91BD4A;
}
.active, a.active
{
color: #FFFFFF;
}

Fiddle
在这里，我尝试为主页的第一个列表项添加一个类，但它没有任何区别，有没有办法在不改变我的代码的情况下做到这一点`？

【问题讨论】：

你可以使用 jQuery - docs.shopify.com/manual/configuration/store-customization/…
您无法使用 CSS自动执行此操作，因为它无法检测您所在的页面。这通常是 Javascript 的领域。

标签： html css

【解决方案1】：

你必须使用 JavaScript 或 jQuery 来做到这一点

例子

CSS

<style type="text/css">
ul.navigation
{
    background:#fff;
}
ul.navigation li a
{
    text-decoration:none;
}
ul.navigation li a.on
{
    background:yellow;
    padding:2px 6px;
}
</style>

<script type="text/javascript">
$(function(){
    var $page = jQuery.url.attr("file");
    $('ul.navigation li a').each(function(){
        var $href = $(this).attr('href');
        if ( ($href == $page) || ($href == '') ) {
            $(this).addClass('on');
        } else {
            $(this).removeClass('on');
        }
    });
});
</script>

HTML

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="solutions.html">Solutions</a></li>
    <li><a href="contact.html">Contact</a></li>

演示在这里 http://www.kevinleary.net/wp-samples/jquery-current-navigation/solutions.html

我希望这会有所帮助

谢谢

【讨论】：

【解决方案2】：

试试这样：Demo

.menu {
    background-color: #91BD4A;
    padding: 0;
    margin: 0;
}
.menu ul {
    margin:0;
    padding:0;
    overflow: hidden;
    text-align: center;
    font-size:0;
}
.menu li {
    display: inline;
    list-style: none;
}
.menu li a:link, .menu li a:visited {
    display: inline-block;
    margin-right: -6px;
    width: 140.7px;
    color: #000;
    font-family: Verdana, sans-serif;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    background-color: #91BD4A;
}
.menu li.active > a {
    text-decoration: underline;
     background-color: #999;
    color: #FFFFFF;
}

通过 CSS，您可以在所有页面中手动执行此操作以突出显示当前页面，如果您想动态提供此功能，则需要 Jquery..

【讨论】：