代码之家 › 专栏 › 技术社区 › user279860

Javascript显示/hid div并根据哪个div可见更改css类?

onclick class css javascript

user279860 · 技术社区 · 16 年前

我有一小段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';
}

<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中是可能的吗?我想是的,但我不知道如何在客户端实现它。

谢谢

2 回复 | 直到 15 年前

Joel 16 年前

更改锚定以使用onclick事件而不是href javascript代码。

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

然后通过辩论 this switchid 功能。是一个javascript关键字,在本场景中它引用元素( a ).

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

函数修改列表。

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