使用2个按钮隐藏和显示2个重叠的div，jquery

Question

我是jQuery的html css动画新手。 如果有人有时间回答，这是我的问题。

THE RED是我的第一个div，上面有一个按钮， 蓝色是第二个。 它们具有完全相同的尺寸，红色位于其上方。

我想要做的是当你点击按钮＆＃34;点击＆＃34;使用按钮隐藏RED DIV，并用十字架显示蓝色。 当你点击十字架时，第一个div会返回按钮。

我知道这是一个常见的问题，但我真的迷失了。 谢谢

代码示例：

<div id="reddiv">
  <button id="submitbutton">click</button>
</div>
<div id="bluediv">
  <button id="closebutton">X</button>
</div>

Answer 1

以下是一个如何做到这一点的示例，但有很多不同的方法可以做到这一点。 http://jsfiddle.net/3vg6xm79/

Jquery＃1

$('div').on('click', function(){
   $('div').css('z-index', 1);
    $(this).css('z-index', 0);
});

你也可以这样做http://jsfiddle.net/3vg6xm79/1/：

Jquery＃2

$('div').on('click', function(){
   $('div').show();
    $(this).hide();
});

HTML

<div class="red"></div>
<div class="blue"></div>

的CSS

.red, .blue{
    width: 100px;
    height: 50px;
    position: absolute;
}
.red{
    background: red;
}
.blue{
    background: blue;
}

Answer 2

我总是喜欢在你的元素中添加一个类来保证单个属性，因为它允许更多的灵活性和未来样式的变化，所以我的回答是@Chanckjh，我会使用这个jquery：

$(document).ready(function () {
            $('.click-here').click(function () {
                $('.box2').addClass("z-index");
                $('.box1').removeClass("z-index")                
            });
    $('.cross').click(function () {
                $('.box1').addClass("z-index");
                $('.box2').removeClass("z-index")                
            });
        }); 

这里是 FIDDLE