javascript - Jquery按钮切换显示隐藏div

Question

我在页面上有这两个 div，它们下面有两个按钮来分别控制隐藏和显示它们。

<div class="threeSixtyContainer">


    <div class="toggle360" style="display: block;" id="Blue">Im Blue</div>
    <div class="toggle360" style="display: none;" id="Red">Im Red</div>

    <ul class="flashlinks">

        <li id="" class="flashlinks"><a href="#Blue" onclick="toggle_visibility('Blue');">Blue</a></li>
        <li id="" class="flashlinks"><a href="#Red" onclick="toggle_visibility('Red');">Red</a></li>

     </ul>

</div>

我现在在链接的 onclick 上使用这个 javascript。

function toggle_visibility(id) {

    var e = document.getElementById(id);

    console.log(e);
    if(e.style.display == 'none') {
        e.style.display = 'block';
    } else {
        e.style.display = 'none';
    }
}

它可以工作，但是我如何才能做到单击一个按钮将禁用另一个按钮。因此，单击蓝色将显示蓝色 div 并隐藏红色 div，然后禁用该按钮并启用另一个按钮，这样可以向下执行相同操作，但方向相反。

我已经用我在页面上使用的代码进行了 fiddle 演奏，该代码有效，但在 fiddle 上却不起作用？不知道为什么，无论如何我都会发布它。

编辑_ fiddle 现在正在工作。谢谢。

<强> JSFIDDLE

Answer 1

这是一个可能的解决方案(无 jQuery):http://jsfiddle.net/wared/A6w5e/ 。

正如您可能已经注意到的，链接并未“禁用”，我只是保存当前显示的 DIV 的 id，以便在切换之前检查请求的 id: if (current !== id)。

另一件事需要注意的是，toggle_visibility 在其内部被覆盖(仅一次)。它可能看起来很奇怪，但这只是创建 closure 的一种方法。为了将名为 current 的变量包含在私有(private)上下文中。目标是避免污染父作用域。

最后，我修改了原始代码以隐藏除 id 所定位的 div 之外的所有 div。

function toggle_visibility(id) {
    var current = 'Blue';
    (toggle_visibility = function (id) {
        var div, l, i;
        if (current !== id) {
            current = id;
            div = document.getElementsByClassName('toggle360');
            l = div.length;
            i = 0;
            for (; i < l; i++) {
                div[i].style.display = div[i].id === id ? 'block' : 'none';
            }
        }
    })(id);
}