Question

我显示了3个（或更多但此处为3个）蓝色DIV，还有3个相同大小的红色DIV被隐藏。

我想要做什么：当点击蓝色div时，这个蓝色div被隐藏并被适当的红色div替换（每个红色div内容将会不同）而其他蓝色div则保持蓝色，如果这些不是点击。

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

我的html / 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>

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