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>

我正在使用此javascript链接的onclick。

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

Answer 1

在加载元素之前，您无法执行js方法。所以请将您的代码包装在head / body

中

检查此fiddle

Answer 2

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

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

另一件需要注意的事情是toggle_visibility在其内部被覆盖（仅一次）。它可能看起来很奇怪，但它只是一种创建closure的方法，以便将名为current的变量括在私有上下文中。目标是避免污染父范围。

最后，我修改了原始代码，以隐藏除id定位目标之外的所有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);
}

Answer 3

将您的代码包裹在head或body。

您在创建DOM之前执行代码

Fiddle Demo

Answer 4

有几个人评论为什么它不适合小提琴。回答这个问题......

如果只有两个div，则可以使用jquery轻松切换可见性：

$(document).delegate('.flashlinks a', 'click', function () {
  $('.toggle360').toggle();
});

我会使用css类来禁用链接。然后我会根据类是否存在来选择如何处理点击：

$(document).delegate('.flashlinks a:not(".disabled")', 'click', function () {
  $('.toggle360').toggle();
  $('.flashlinks a').toggleClass("disabled");
});

$(document).delegate('.flashlinks a.disabled', 'click', function () {
  e.preventDefault();
});

在我的CSS中我会有像

这样的东西

.disabled {
    color: black;
    text-decoration:none;
}

jsfiddle