クリックした後にdivを別のものの上に表示する方法

Question

ボタンをクリックした後に一種のオーバーレイが必要です。

がクリックされた後、それは次のようになります：これは一番下にある三角形をクリックする前に、それがどのように見えるかです

を私はこれを行うことができると感じjQueryを使用していますが、私はまだそれを理解していません。誰かが私を正しい方向に向けることができますか？

Answer 1

、私はコンテンツの上に表示される絶対位置（及びサイズに！）のdivを作ることをお勧め（心配しないでください表示/非表示のビットについてまだ...

あなたはそのネイルド、どこであなたがそれをしたいを持ったら

その後、使用してクリックイベント：。

$('selector').toggle() 

は上映を管理し、ハイディそれのng。

非表示にするには、要素のCSSに対して、表示：なしを指定します。 - 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>