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

它可以工作，但我如何使它，使点击一个按钮将禁用其他。因此，单击蓝色将显示蓝色div并隐藏红色div，然后禁用该按钮并启用另一个按钮，这样同样的操作也可以进行，但相反

我对我在页面上使用的代码进行了修改，这些代码可以正常工作，但在小提琴上却不能正常工作？不知道为什么，反正我会贴出来的

编辑-小提琴正在工作。谢谢

---

在加载元素之前，不能执行js方法。因此，将代码包装在

头部

/

身体

---

选中此项

将代码包装在

头部

或

正文

中

您正在创建

DOM

之前执行代码

---

这里有一个可能的解决方案（无jQuery）：

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

if（current！==id）

另一件需要注意的事情是，

toggle\u visibility

在其内部被覆盖（仅一次）。它可能看起来很奇怪，但它只是一种创建变量的方法，以便将名为

current

的变量包含在私有上下文中。目标是避免污染父范围

最后，我修改了原始代码以隐藏除

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

功能切换\u可见性（id）{
var电流='蓝色'；
（切换_可见性=功能（id）{
变量div，l，i；
如果（当前！==id）{
电流=id；
div=document.getElementsByClassName（'toggle360'）；
l=分段长度；
i=0；
对于（；i

一些人评论了为什么它在小提琴中不起作用。要回答这个问题

如果只有两个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;
}

---

请看一下Hi，谢谢您的回复，它工作得非常好。我会尽力的

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