JS切换显示只点击一个，隐藏所有其他的

JS Toggle show only clicked one and hide all others

本文关键字：一个 隐藏所 其他 显示 JS      更新时间：2023-09-26

我刚刚发现这个有用的JS切换…这个可以修改吗?我只想显示实际选中的那个，隐藏所有其他的…

<script type="text/javascript">
function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
    elem.style.display = "block";
}else{
    elem.style.display = "none";
}
}
</script>

<a href="javascript:toggle('test')"> link</a>
<br /><div id="test" style="display: none">text</div>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script>
function show(idToShow, classToHide) {
    var classList = document.querySelectorAll('.'+classToHide);
    var thisElem  = document.getElementById(idToShow);
    var wasShown  = (thisElem.style.display == "block");
    var i = -1;
    while (node=classList[++i]) {
        node.style.display ="none";
    };
    if(!wasShown){
        thisElem.style.display = "block";
    }
}
</script>
</head>
<body>
    <div onclick="show('a','all');">A
        <div class="all" id="a" style="display:none">The stuff to show</div>
    </div>
    <div onclick="show('b','all');">B
        <div class="all" id="b" style="display:none">The stuff to show</div>
    </div>
    <div onclick="show('c','all');">C
        <div class="all" id="c" style="display:none">The stuff to show</div>
    </div>
</body>
</html>

获得ie8支持是一场斗争，那个版本不支持document.getElementsByClassName。似乎document.querySelectorAll 确实在ie8中工作，但不是在怪癖模式下。示例代码修正了使用这个并使用标准模式。

注意:我的第一个快速破解使用了for循环而不是while:

    for (var i=0;i<classList.length;i++) {
        classList[i].style.display ="none";
    };

如果你能发现这将失败(鼠标悬停查看答案)奖励点:

<引用类>

如果列表中有一个id为length的元素(在这种情况下，classList.length将引用该元素，而不是NodeList的长度)

相关文章：