div 변경시 메뉴 li 클래스를 변경하는 방법

Question

여러 기사가있는 한 페이지짜리 사이트에서 작업하고 있습니다. 각 사업부는 등 내가 표준 메뉴 "세 번째"이, "두 번째"클래스 "첫 번째" "기사"와 ID를 가지고

<ul id="nav"> 
    <li id="n1"><a href="#first"></a></li> 
    <li id="n2"><a href="#second"></a></li> 
    <li id="n3"><a href="#third"></a></li> 
    //...etc    
</ul> 

내가받는 클래스 "활성화"를 지정하기 만하면됩니다 현재 기사의 ID가 "first"이고 (다른 모든 li 태그의 활성 클래스 할당을 취소 한 경우) li 태그 w/id n1; 현재 기사의 id가 "second"일 때 활성 태그를 li 태그 w/id n2에 할당합니다.

나는 어떤 도움을 주셔서 감사하겠습니다 ... 저는 정말이 문제에 집착하고 있습니다. TIA에게 도움을 청합니다.

P. 본질적으로 현재 본 기사에 활성 클래스를 할당하기 위해 다음 코드를 사용하고 있습니다.

$('#first, #second, #third, ...).bind('inview', function (event, visible) { 
     if (visible == true) { 
     $(this).addClass("inview");  
     } else { 
     $(this).removeClass("inview"); 
     } 
}); 

Answer 1

더 많은 방법이 있습니다.

var navrefs= document.getElementById('nav').getElementsByTagName('a'); 
for (var i=0, len = navrefs.length;i<len;i++){ 
    if (location.hash == navrefs[i].href){ 
    navrefs[i].parentNode.className = 'active'; 
    } else { 
    navrefs[i].parentNode.className = ''; 
    } 
} 

Answer 2

Here's an example of the following →

다음은 당신이 당신의 현재 활성화 된 문서 페이지에서 클래스 current을 가정합니다 : 그것은 CSS를 달성하기 위해 이래로

var articles = document.getElementsByClassName('article'), 
    al = articles.length, 
    which, i; 

for (i = 0; i < al; i++) { 
    if (/current/.test(articles[i].className)) { 
     which = articles[i].id; 
    } 
} 

var atags = document.getElementsByTagName('a'), 
    al2 = atags.length; 

for (i = 0; i < al2; i++) { 
    if (atags[i].href.search(which) > -1) { 
     atags[i].parentNode.className = 'active'; 
    } else { 
     atags[i].parentNode.className = ''; 
    } 
} 

Answer 3

이것은 당신에게 아이디어를 줄 수있는, 하나 효과, 왜 이런게 올바른 CSS가 :

.first #n1, 
.second #n2, 
.third #n3, 
...etc 
{ 
    CSS for active article 
} 

그리고 나서 JS를 wrapper/body에 적절한 클래스를 설정하는 책임을 맡으십시오.

<li id="n1"><a href="#first" onclick="setC('first')"></a></li> 
etc. 
... 
function setC(str){ 
    document.getElementById('wrapper').className=str; 
} 

이는 JS 엔진