Javascript div更改时如何更改菜单li类

我在一个有几篇“文章”的单页网站上工作。每个部门都有类别“article”和id“first”、“second”、“third”等。我有一个标准菜单：

<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>

---

有更多的方法可以做到这一点。这是一个，它可能会给你一些想法：

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 = ''; 
  }
}

var navrefs=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（变量i=0，len=navrefs.length；i

以下假设您在当前活动的文章页面上有类
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 = '';
    }
}

var articles=document.getElementsByClassName（'article'），
al=文章长度，
这,我,；
对于（i=0；i-1）{
atags[i].parentNode.className='active'；
}否则{
atags[i].parentNode.className=''；
}
}
既然这是为了实现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;
}


等
...
函数setC（str）{
document.getElementById（'wrapper'）。className=str；
}

这将减少对JS引擎的需求
类是否处于活动状态

以获得一些CSS？谢谢。这是我最初关于如何处理此问题的想法；但是，用户可以导航到不同的“文章”只需向下滚动页面，而不仅仅是单击菜单链接。@javascript哈，那么您是通过滚动位置来确定当前文章的吗？

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