JQuQuery div 独立替换

Question

我显示了 3 个（或更多，但这里是 3 个）蓝色 DIV，并且还有 3 个相同大小的红色 DIV 被隐藏。

我想做的：当单击蓝色div时，该蓝色div将被隐藏并替换为适当的红色div（每个红色div内容将不同），如果这些蓝色div尚未被单击，则其他蓝色div将保持蓝色。

然后，当我们单击红色div时，它会隐藏并显示原始的蓝色div。

我的网页/CSS

    <style type="text/css">
        body{width: 900px;}
        #first, #second, #third{background: blue;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;}
        #first-toggle, #second-toggle, #third-toggle {background: red;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;display: none;}

    </style>

<div id="first">I'm an image</div>
<div id="second">I'm an image</div>
<div id="third">I'm an image</div>

<div id="first-toggle">I'm an content</div>
<div id="second-toggle">I'm a content</div>
<div id="third-toggle">I'm an content</div>

我提前感谢您未来的答案，或者即使您花时间阅读它至少;)

Answer 1

使用最简单的 html 标记查看这个伟大的解决方案。
随心所欲地复制粘贴div！

D E M O 1

或：

D E M O 2

。这是我的"只是为了好玩"的游戏

D E M O 3

D E M O 4 带有悬停的东西:D

Answer 2

你可以使用 jquery 的 hide（） 和 show（）。 工作示例在这里

http://jsfiddle.net/jpezK/4/

Answer 3

您可以在您的情况下轻松使用 replaceWith。

看看这个工作jsFiddle，你就会明白了。

有关替换的更多信息与此处

Answer 4

这是一个解决方案的链接.. http://jsfiddle.net/ZyBkA/3/

希望这是你需要的！