如何更改菜单李类当div更改

Question

我正在一个单页网站上有几个“文章”。每个div有类“物品”和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> 

我需要做的是分配类“活动”到li标签w/id n1当前文章的id为“first”（并且取消所有其他li标签的活动类别）;将当前文章的id为“second”时将活动类分配给li标签w/id n2;等

我将不胜感激任何帮助......我真的坚持这一个。 TIA为您提供帮助。

P.S.实际上，我使用以下代码为当前查看的文章分配活动类：

$('#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你当前活动的文章页面上：

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效果，为什么不正确的CSS是这样的：

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

，然后让JS负责在包装器/正文上设置适当的类，例如

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

这将减少对JS引擎