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>

我需要做的是当当前文章的id为“first”（并从所有其他li标签取消分配活动类）时，将类“active”分配给li标签w / id n1;当当前文章的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引擎的需求

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

3 个答案: