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

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

这是我正在谈论的图像：

enter image description here

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

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

这是我的代码（重要位）：

<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找出您所在的页面并添加相应的类

CSS和活动状态nav元素

1 个答案: