隱藏和顯示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

回答

相關問題