jQuery按钮切换显示隐藏div

用户名

我在页面上有这两个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，然后禁用该按钮并启用另一个按钮，以便可以相同但相反。

我已经在我的页面上使用了有效的代码，但是在小提琴上不是吗？不知道为什么，请不管如何张贴。

编辑_小提琴现在工作。谢谢。

JSFIDDLE

叶子

这是一个可能的解决方案（没有jQuery）：http : //jsfiddle.net/wared/A6w5e/。

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

要注意的另一件事是，toggle_visibility其内部被覆盖（仅一次）。看起来很奇怪，但这只是创建闭包以将命名变量封装在current私有上下文中的一种方法。目的是避免污染父级作用域。

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

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);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。