Javascript JS切换仅显示单击的一个，隐藏所有其他_Javascript_Toggle

Javascript JS切换仅显示单击的一个，隐藏所有其他

javascript

Javascript JS切换仅显示单击的一个，隐藏所有其他,javascript,toggle,Javascript,Toggle,我刚发现这个有用的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.displ

我刚发现这个有用的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>


功能切换（控制）{
var elem=document.getElementById（控件）；
如果（elem.style.display==“无”）{
elem.style.display=“块”；
}否则{
elem.style.display=“无”；
}
}

文本

如果您能发现失败的时间，则可获得额外积分（鼠标悬停查看答案）：

如果列表中有id为

length

的元素（在这种情况下，

classList.length

将引用该元素，而不是节点列表的长度）

是的，当然是。但是它应该作用于什么HTML呢？您是使用类来标识元素还是其他属性？向我们展示你的（相关）代码：帮助我们帮助你。HTML由PHP生成。。结构是这样的：生成一些文本和div，嘿，Kim SJ！谢谢你的回答。不幸的是，代码不起作用。我还替换了for循环。。一定是出了什么问题：/@user3414925如果你愿意，你能把你的代码放在某个地方（例如jsbin.com或jsfiddle.com）吗？我会看一下。你有没有检查控制台，看看它是否为你解释了一些事情？似乎是IE8有问题。。。用铬做的很好。。IE8中的警报类似于：“对象不支持方法/值…”（原文：德语）有什么想法吗？显示IE8不支持

GetElementsByCassName

。如果需要完全的跨浏览器支持，你可以考虑使用JQuYYUI（大锤，但是有一个为你做的重锤）嗯…querySelectorAll（'.all'）看起来可以解决IE8问题。。。解决方案编辑：：-）

<!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>

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