Javascript显示/隐藏div并根据哪个div可见更改css类？

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”类从它当前所在的 li 中删除并应用于当前 li。这可以用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