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

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

2 个答案: