JS : 메뉴에서 현재 요소 지정하기

Question

메뉴가 있습니다.

 <ul> 
    <li id="active"><a href="/">Головна</a></li> 
    <li><a href="/about/">Про компанію</a></li> 
    <li><a href="/work/">Діяльність</a></li> 
    <li><a href="/initiative/">Ініціативи</a></li> 
    <li><a href="/statti/">Статті</a></li> 
</ul> 

이 목록의 id = active 속성을 변경하는 방법을 제안 할 수 있습니까? 예를 들어 about을 클릭하면이 li 요소가 활성화 된 것으로 표시되기를 원합니다.

감사

Answer 1

currentl 스타일링의 an elegant css method있다 y 자바 스크립트 또는 서버 측 지원없이 활성 탐색 상태. 기본적으로 탐색 상태를 고유하게 식별하는 하나의 ID (예 : 본문 ID 속성)로 활성 상태를 강조 표시하는 CSS 선택기를 만들면 충분합니다.

Answer 2

ID가 아닌 클래스를 사용하십시오. 그 이유는 id는 요소를 식별하기위한 것이며,이 경우 "액티브"로 식별되는 페이지의 유일한 요소는 "액티비티"구별이 필요한 다른 컨텍스트가 있더라도이 것이됩니다. 클래스를 사용하면 다른 컨텍스트에서 여러 "활성"요소를 가질 수 있으며 의미 상으로 정확합니다.

Answer 3

올바른지 확인하려면 id가 아닌 class를 사용해야합니다. (자세한 설명은 http://css-discuss.incutio.com/?page=ClassesVsIds를 참조 기본적으로 ID가 페이지에 고유해야합니다.).

당신은 사용하여 클래스를 수정할 수 있습니다 jQuery의 속성 수정 기능 내장 : http://docs.jquery.com/Attributes

봐 "클래스"에서

Answer 4

하는 경우 메뉴는 각 링크의 OnClick이 같은 기능을 실행할 수의 말 "xpto"하자, ID를했다 :

onclick="setActiveId(this);" 


functionSetActiveId(newActiveElem){ 
    var allElems = document.getElementById('xpto').childNodes; 

    for(var i = 0; i < allElems.length; i++){ 
    allElems[i].id = ''; 
    } 

    newActiveElem.id = 'active'; 
}