Question

我正在网站上构建一个菜单，事实是我无法实现更改所选菜单项。我知道它必须通过添加一些JS来制作，但是因为我是编码的新手，所以我找不到任何解决方案。

菜单已经准备好并且工作正常然后我点击它切换到活动的项目，但是当页面开始时没有任何活动项目，并且当我使用鼠标滚动它时不会改变。

CSS

#menu li {
display:inline-block;
float: right;
margin-top: 8px;
}

#menu {
position:fixed;
z-index: 70;
height: 60px;
width: 100%;
background-color: #FFFFFF;
}
/**home-button**/
#menu #Home-button a:hover {
background-image:url(images/home_hov.gif);
background-repeat: no-repeat;
}
#menu #Home-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/home_st.png);
background-repeat: no-repeat;
}
/**about-button**/
#menu #About-button a:hover  {
background-image:url(images/about_hov.gif);
background-repeat: no-repeat;
}
#menu #About-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/about_st.png);
background-repeat: no-repeat;
}
/**works-button**/
#menu #Works-button a:hover  {
background-image:url(images/works_hov.gif);
background-repeat: no-repeat;
}
#menu #Works-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/works_st.png);
background-repeat: no-repeat;
}
/**contacts-button**/
#menu #Contacts-button a:hover  {
background-image:url(images/contacts_hov.gif);
background-repeat: no-repeat;
}
#menu #Contacts-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/contacts_st.png);
background-repeat: no-repeat;
}

/**selected-items**/
#menu #Home-button.active  a {
background-image:url(images/home_act.png);
background-repeat: no-repeat;
}
#menu #About-button.active  a {
background-image:url(images/about_act.png);
background-repeat: no-repeat;
}
#menu #Works-button.active  a {
background-image:url(images/works_act.png);
background-repeat: no-repeat;
}
#menu #Contacts-button.active  a {
background-image:url(images/contacts_act.png);
background-repeat: no-repeat;
}

HTML

<nav id="menu">
    <ul>
        <li id="Home-button" ><a id="home" class="hightlight" href="#"></a></li>
        <li id="About-button"><a id="about" class="hightlight" href="#"></a></li>
        <li id="Works-button" ><a id="works" class="hightlight" href="#"></a></li>
        <li id="Contacts-button"><a id="contacts" class="hightlight" href="#"></a></li>
    </ul>
</nav>

的JavaScript

var menu = menu = $('#menu ul');

$('.hightlight').click(function(event) {

    menu.children().removeClass();
    $(this).parent().addClass('active');

});

请帮助解决问题。

提前致谢！

Answer 1

有一个名为skollr.js的库，可让您决定元素出现在屏幕上时会发生什么。看看吧。

在页面滚动上突出显示当前菜单项

1 个答案: