jquery - クリック後に別のdivの上にdivを表示する方法

Question

ボタンをクリックした後、一種のオーバーレイが必要です。これは、下部の三角形をクリックする前の外観です。

クリックすると、次のようになります。

これはjQueryでできると思いますが、まだわかりません。誰かが私を正しい方向に向けることができますか?

Answer 1

大まかな答えとして（与えられた情報に基づいて...）、コンテンツの上に表示される絶対位置（およびサイズ）のdivを作成することをお勧めします（表示/非表示ビットについては心配しないでくださいまだ...

釘付けになったら、必要な場所に置きます。

次に、以下を使用したクリック イベント:

$('selector').toggle()

表示と非表示を管理します。

非表示で開始するには、要素の CSS に display:none; を指定します。- Jquery はDisplay:block要素を表示する on を追加し、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>