현재 메뉴 항목 강조 표시 페이지 스크롤

웹 사이트에 메뉴를 만들 때 선택한 메뉴 항목을 변경할 수 없다는 것이 있습니다. 몇 가지 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>

자바 스크립트

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

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

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

});

이 페이지를 해결하기 위해 도와주세요 흠집. 사전에

감사합니다!

출처

2014-10-25 Emil Gurbanov