Jquery 单击其他Div时，将Div淡入可见/隐藏状态

单击其他三个Div中的一个时，如何在隐藏或可见之间进行Div更改

比如说,

CSS

#red_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:50px;
 background-color:red;   
}

#green_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:150px;
 background-color:green;    
}

#yellow_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:150px;
 background-color:yellow;    
}

#blue_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:50px;
 background-color:blue;    
}

HTML

<div id="red_box"></div>
<div id="yellow_box"></div>
<div id="green_box"></div>
<div id="blue_box"></div>

我希望在单击任何其他框时切换红色框的可见性。例如，如果用户单击黄色框，红色框将消失，然后单击绿色框，它将重新出现。但是我需要它，这样他们可以按任意顺序单击这些框，并且每次单击一个框时，它将使红色框可见或隐藏，这取决于它是否已隐藏或可见

我希望这是有意义的

我也很好奇我会如何用淡入淡出的效果来实现这一点，所以红色框不会消失或出现，而是会慢慢淡入淡出

下面是上面代码的一部分

我不确定这是否完全可以通过CSS实现，或者是否可以/应该通过JQuery实现。我也不确定它是否会使用不透明或显示：无；标记，或两者都不标记，或两者都标记

---

有人能帮我吗？

假设我正确理解了您的意思，您希望在单击任何其他框时淡入/淡出红色框。如果是这样，您可以使用：

这是一个例子

---

如果您不关心淡入淡出，可以使用普通方法。

假设我理解正确，您希望在单击任何其他框时淡入/淡出红色框。如果是这样，您可以使用：

这是一个例子

---

如果您不在乎淡入淡出，您可以使用普通方法代替。

您可以使用下面的jquery

在其他三个分区（黄色、绿色、蓝色）中添加一些类，然后

因此，您将使用html

<div id="red_box"></div>
<div id="yellow_box" class="some"></div>
<div id="green_box" class="some"></div>
<div id="blue_box" class="some"></div>

---

您可以使用下面的jquery

在其他三个分区（黄色、绿色、蓝色）中添加一些类，然后

因此，您将使用html

<div id="red_box"></div>
<div id="yellow_box" class="some"></div>
<div id="green_box" class="some"></div>
<div id="blue_box" class="some"></div>

---

类似这样的事情可能：

$("div").on('click', function() {
    if (this.id != "red_box") {
        $('#red_box').fadeToggle(200);
    }
});

---

像这样的事情可能：

$("div").on('click', function() {
    if (this.id != "red_box") {
        $('#red_box').fadeToggle(200);
    }
});

据我所知，仅使用CSS无法使任何内容褪色。用户交互也非常有限（

：hover

和

：focus

）。你需要Javascript

好消息是这真的很简单。只需向div添加一个类，该类将切换红色框，并添加以下Javascript使其切换：

据我所知，你不能只用CSS来淡化任何东西。用户交互也非常有限（

：hover

和

：focus

）。你需要Javascript

好消息是这真的很简单。只需向div添加一个类，该类将切换红色框，并添加以下Javascript使其切换：

---

这可以通过CSS3实现，注意浏览器兼容性的限制，尽管您仍然希望使用几行直接的javascript。（使用CSS设置转换样式，使用onclick javascript触发转换。）如果出于任何其他原因要包含jquery库，那么您也可以使用它——显然人们仍然使用IE8。。。如果你不想加入jquery，那么就不要让你的网站陷入困境，只需牺牲n00b浏览器的吸引力。这可以通过CSS3实现，注意浏览器兼容性的限制，尽管你仍然希望使用几行直接的javascript。（使用CSS设置转换样式，使用onclick javascript触发转换。）如果出于任何其他原因要包含jquery库，那么您也可以使用它——显然人们仍然使用IE8。。。如果您不想包含jquery，那么就不要让您的站点陷入困境，只需牺牲n00b浏览器的赏心悦目即可。

$('.togglesRed').click(function(){
    $('#red_box').fadeToggle();
});