Question

我有10个不同的div和10个按钮。我可以轻松切换（隐藏/可见）它们：

 <script>
    function fun(x)
    {        
    document.getElementById(x).style.visibility = 
    (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden";
    }
    </script>
    <div id="div1" style="visibility:hidden">div1</div><input type="button" value="click" onclick="fun('div1')">
    <div id="div2" style="visibility:hidden">div2</div><input type="button" value="click" onclick="fun('div2')">

现在我要做的是：说，div1已经可见，点击button2，div2与所有其他div（div1，div3，... div10）一起被隐藏，如果其中一个已经可见点击button2，依此类推。我该怎么办？

Answer 1

检查小提琴：http://jsfiddle.net/BJ6bW/2/

在运行fun（）

之前添加重置功能

function reset(x) {
    Array.prototype.slice.call(document.querySelectorAll('div')).forEach(function (element) {
        if (element.id == x) {
            return false;
        }
        element.style.visibility = 'hidden';
    });
}

function fun(x) {
    reset(x);
    document.getElementById(x).style.visibility = (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden";
}

以show / hide方式切换两个以上的div

1 个答案: