Question

所以我一直在网站上工作，现在想要让导航栏突出显示当前页面，我尝试在网站上搜索已回答的问题，但他们看起来与我的代码截然不同所以我想我请问。

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

<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
在这里，我尝试为主页的第一个列表项添加一个类，但它没有什么区别，有没有办法在不改变我的代码的情况下做到这一点？

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

JQ

<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

了解更多信息

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

我希望这会有所帮助

感谢

Answer 2

请尝试以下操作： GET API

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

HTML + CSS导航栏突出显示当前页面

2 个答案: