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

我是新来的jQuery的HTML CSS的动画。这是我的问题，如果有人有时间回答。隐藏和显示2与2个按钮重叠的div，jquery

details image

THE RED是我的第一个div上有一个按钮， THE BLUE是第二个。他们有完全相同的大小，红色是最重要的。

我想要做的是当你点击按钮“点击”按钮隐藏红色的DIV，并让蓝色与十字。当你点击十字架上的第一个div时，用按钮回来。

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

代码示例：

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

来源

2015-04-06 Guillaume de Pierpont

你试过？首先尝试在谷歌样品搜索它很多样品在那里，并使其很容易 –

我已经尝试了一些功能switchVisible（）{如果和其他和显示样式，但我真的不能这样做--_- –

看一看[在这个小提琴]（http://jsfiddle.net/zeroskillz/8xh4Lnjk/） – Ted

下面是一个例子，你可以怎么做，但也有很多不同的方式来做到这一点。 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; 
}

来源

2015-04-06 15:43:15 Chanckjh

我也会试试它，但Steph答案对我来说更好看，但谢谢你！ –

我总是喜欢给类添加到insteed一个属性的您的元素，因为它允许更多的灵活性和未来风格的变革，我的答案是呈三角@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

来源

2015-04-06 15:45:22

我也会试试，但Steph的回答对我来说更好，但谢谢！ –

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

回答

相关问题