Как изменить класс меню li при изменении div - PullRequest
0 голосов
/ 25 марта 2011

Я работаю над одностраничным сайтом, на котором есть несколько «статей».Каждый div имеет класс «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>

Что мне нужно сделать, это назначить класс «active»к тегу li с идентификатором n1, когда текущая статья имеет идентификатор «first» (и отменяет назначение активного класса из всех других тегов li);назначить активный класс тегу li с идентификатором n2, если текущая статья имеет идентификатор "second";и т.д.

Буду признателен за любую помощь ... Я действительно застрял на этом.TIA за вашу помощь.

PS Я использую следующий код, чтобы, по сути, назначить активный класс для просматриваемой в данный момент статьи:

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

Ответы [ 3 ]

1 голос
/ 25 марта 2011

Есть еще способы сделать это.Это тот, который может дать вам идеи:

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 = ''; 
  }
}
0 голосов
/ 25 марта 2011

Поскольку это для достижения эффекта 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

0 голосов
/ 25 марта 2011

Вот пример следующего →

Ниже предполагается, что у вас есть класс 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 = '';
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...