如何在點擊後在另一個頂部顯示div

Question

點擊一個按鈕後，我想要一種疊加。這是它的外觀是之前點擊底部的三角形：

然後它被點擊之後，它應該是這樣的：

我覺得這是可以做到與jQuery，但我還沒有想出它。有人能指引我朝着正確的方向嗎？

Answer 1

作爲一個看球的答案（基於被賦予了什麼信息...），我會建議作出出現在內容的頂部的絕對定位（和大小！）DIV（不用擔心關於顯示/隱藏位，只是還沒有...

一旦你得到了釘子釘住，並且要將它

然後使用單擊事件：

$('selector').toggle() 

將管理的顯示和HIDI它的。

要隱藏它，對於元素的CSS，給它一個display：none; - jquery將添加一個Display:block顯示該元素，然後將覆蓋CSS文件中的屬性。

Answer 2

這是很基本的jquery。

// address the arrow button with an #id or .class 
$('#arrow_button').click(function(){ 
    $('#overlay').toggle(); 
}); 

Answer 3

這是你想要達到的目標嗎？

$('.buttons button').click(function(){ 
 
    var $this = $(this); 
 
    $('.tabs .active').hide('drop',function(){ 
 
     $(this).removeClass('active');  
 
     $('.tabs div:eq('+$this.index()+')').show('fade').addClass('active');   
 
    });  
 
    
 
});

.tabs{ 
 
    height:300px; 
 
} 
 
.tab{ 
 
    height:250px; 
 
    display:none; 
 
    border:solid blue thick; 
 
    background-color:#88a; 
 
} 
 
.tab.active{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="tabs"> 
 
    <div class="tab active">Content1</div> 
 
    <div class="tab">Content2</div> 
 
    <div class="tab">Content3</div> 
 
</div> 
 
<div class="buttons"> 
 
    <button>content 1</button> 
 
    <button>content 2</button> 
 
    <button>content 3</button> 
 
</div>