javascript - 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 确定您所在的页面并添加适当的类