Javascript показать / спрятать div и изменить класс CSS, в зависимости от того, какой div является видимым?

Question

У меня есть небольшой кусочек javascript для отображения / скрытия элементов div, в зависимости от того, какая ссылка нажата в списке. Это не очень хорошо, но работает отлично. Я хотел бы назначить активному состоянию элемент списка, в зависимости от того, какой div отображается. Вот мой JS и HTML:

var ids=new Array('section1','section2','section3','section4');

function switchid(id){  
    hideallids();
    showdiv(id);
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

HTML:

<ul>
<li class="activeItem"><a href="javascript:switchid('section1');">One</a></li>
<li><a href="javascript:switchid('section2');">Two</a></li>
<li><a href="javascript:switchid('section3');">Three</a></li>
<li><a href="javascript:switchid('section4');">Four</a></li>
</ul>

<div id="section1" style="display:block;">1111111</div>
<div id="section2" style="display:none;">2222222</div>
<div id="section3" style="display:none;">3333333</div>
<div id="section4" style="display:none;">4444444</div>

При щелчке раздела 2 (или любого другого) я бы хотел, чтобы класс "activeItem" был удален из библиотеки, в которой он находится в данный момент, и применен к текущей библиотеке. Возможно ли это с помощью JavaScript? Я думаю, что это так, но я не могу понять, как реализовать это на стороне клиента.

Спасибо!

Answer 1

Если вы можете использовать jQuery (или что-то подобное), поскольку в него встроена эта способность: http://docs.jquery.com/Attributes - addClass / removeClass

Answer 2

Измените свои якоря, чтобы использовать событие onclick вместо кода href javascript.

<a onclick="switchid('section1');return false;">One</a>

Затем передайте аргумент this в вашу функцию switchid. this - это ключевое слово javascript, которое в данном сценарии ссылается на элемент (a).

<a onclick="switchid('section1', this);return false;">One</a>

Теперь, чтобы функция switchid изменила список.

function switchid(id, el){  
    hideallids();
    showdiv(id);

    // rejiggered for text nodes
    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
            li.className = "";
            li = li.nextSibling;
        }
    }

    el.parentNode.className = "activeItem";
}

Попробуйте: http://jsbin.com/esazu3/edit