CSS 和活动状态导航元素

Question

为菜单制作一个活动的导航元素并不难，这里有一个例子。 http://jsfiddle.net/6nEB6/38/

<ul>
    <li><a href="" title="Home">Home</a></li>
    <li class="active"><a href="" title="Deals">Deals</a></li>
    <li><a href="" title="Support">Support</a></li>
    <li><a href="" title="Contact">Contact</a></li>
</ul>

CSS：

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
} 

ul {
    background: url(http://shared.web2works.co.uk/tmp/tab-bg-top.png) no-repeat;
    height: 51px;
    font-family: arial;
    font-size: 14px;
}

ul li {
    float: left;
    height: 51px;
}

ul li a {
    display:block;
    background: url(http://shared.web2works.co.uk/tmp/nav-seperator.gif) no-repeat top right;
    padding: 17px 20px 17px 21px;
    text-decoration: none;
    color: #263e60;
}

ul li:last-child a{
    /*background-image: none;*/
}

ul li:first-child a{
    padding-right: 75px;
}

li.active a, li:hover a {
    background: #02284c; 
    color: #FFF;
    margin-left: -2px;
    padding-left: 23px;
}

我需要的有点不同。在大多数活动状态下，人们倾向于设置菜单按钮的样式，以便您可以对每个按钮使用相同的样式。我需要它，以便按钮为每个状态激活不同的图像。

这是我正在谈论的图像：

这些按钮具有不同的发光效果，它们都是不同的图像。当您选择不同的按钮时，发光应该保持活动状态。因此，如果我这样做，我将无法为每个按钮使用相同的样式。

按钮更改页面并且悬停正常工作，我只是无法将每个按钮的状态设置为在到达目标页面时处于活动状态。唯一有效的状态是第一个按钮，即主页。

这是我的代码（重要部分）：

<div id="wrapper">
</div>

<div class="menu" id="menunav">
    <ul class="menuul">
        <li><a id="home-link">Home</a>
        </li>

        <li><a id="work-link">Work</a>
        </li>

        <li><a id="about-link">About</a>
        </li>

        <li><a id="contact-link">Contact</a>
        </li>

        <li><a id="resources-link">Resources</a>
        </li>
    </ul>
</div>

CSS：

.menu {
    height: 50px;
    margin: auto;
    width: 650px;
    text-align:center;
    padding:10px;


}

.menu ul li {
    display: inline-block;
    margin: 0 10px;
}

.menu ul li a {
    display: block;
    text-indent: -99999px;
    cursor: pointer;
    color: #00000;

}

#home-link {
    background: transparent url() no-repeat;
    width: 90px;
}

#home-link:hover, #home-link.current-item {
    background:url() no-repeat;
}

#work-link {
    background: transparent url() no-repeat ;
    width: 90px;
}

#work-link:hover, #about-link.current-item {
    background:url() no-repeat;
}

#about-link {
    background:url() no-repeat;
    width: 90px;
}


#about-link:hover, #services-link.current-item {
    background:url() no-repeat;

}

#contact-link {
    background: transparent url() no-repeat;
    width: 90px;
}

#contact-link:hover, #work-link.current-item {
    background:url() no-repeat;
}

#resources-link {
    background:url() no-repeat;
    width: 100px;
}

#resources-link:hover, #contact-link.current-item {
    background:url() no-repeat;
}

.current-item {
}

JS：

function switchscrollscroll()
{
    var scrolloffset = $("#wrapper").scrollLeft();

    if(scrolloffset == 0 && scrolloffset <= 1999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#home-link').addClass("current-item");
    }
    else if(scrolloffset >= 2000 && scrolloffset <= 3999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#work-link').addClass("current-item");
    }
    else if(scrolloffset >= 4000 && scrolloffset <= 5999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#about-link').addClass("current-item");
    }
    else if(scrolloffset >= 6000 && scrolloffset <= 7999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#contact-link').addClass("current-item");
    }
    else if(scrolloffset >= 8000 && scrolloffset <= 10000)// Contact
    {
        $('#menu ul li a').removeClass('current-item');
        $('#resources-link').addClass("current-item");
    }
}

switchscroll();
 $("#wrapper").scroll(function(){
    switchscrollcroll();
});
});

图片是故意取出来的。如果有人以前做过类似的事情，我将不胜感激。

Answer 1

您可以通过向正文添加一个类来做到这一点。例如，如果您在工作页面的正文中有 work 类，那么您的 css 可能看起来像

.work #work-link {
    background: transparent url(different image) no-repeat ;
}
#work-link {
    background: transparent url(default image) no-repeat ;
    width: 90px;
}

如果您不想到处编辑每个页面，那么您可以使用 jquery 找出您所在的页面并添加适当的类