複数のjScrollPaneがオーバーラップし、他のユーザーへのアクセスを妨げる

Question

リンクをクリックするとjQuery経由でコンテンツが変更される "1ページ"のWebサイトがあります。ここで

はDIVレイアウトのサンプルです：

<div id="div1" class="scroll-pane"> 
</div> 
<div id="div2" class="scroll-pane"> 
</div> 
<div id="div3" class="scroll-pane"> 
</div> 

ですから、例えば一つのリンクをクリックして「DIV1は」フェードアウトと「DIV2」（以前に隠された）その場所にフェードインしますします。すべてのDIVは、同じCSS位置を持ちます。私のDIVはすべてjScrollPaneを持っていますが、それらは互いに重なり合い、div3のペインは常に他のものの上に描画されているようです。私はそれがHTMLで作成された順序と関係していると推測していますか？ 2のペインは1のペインの上にあり、3のペインは2と1のペインの上にあります。

div3の内容がすべて非表示になっても、そのペインは表示されたまま残り、残りの2つのDIVは下に重なっています。だから私はdiv3のスクロール可能性だけを否定することができますが、他のDIVは「下に」あり、到達できません。

私はJScrollPaneを隠すことができますが、私は同時にそれらのすべてを扱うことしかできません。私がjScrollPaneを非表示にすると、それらはすべて非表示になります...フェードインとフェードインするので、jScrollPaneのクラスではなく、DIVのzIndexを変更しようとしましたが、これはペイン自体のzIndexを変更しません。私もDIVsを隠していたが、ペインは後ろに残っていた。

jScrollPaneを個別に制御してzIndexを変更する方法や、それらのすべてが消えずにDIVと共に個別に非表示にする方法はありますか？

大歓迎です。

Answer 1

私はあなたが1つだけを表示したいと思い、jqueryを使用していると仮定します。

htmlオーダーdiv 3と同じことは、別のdivと同じ場所に置くと、他のオブジェクトの上の同じ場所に読み込まれるため、自然に最後になります。

$(#div1).css(z-index, 1); // divタグ

$(.scroll-pane).css(z-index, 1); //クラス

予告差のためにのために：あなたが実行してdiv要素または任意のHTML要素のzインデックスプロパティを変更することができますjqueryのでは

＃と。クラスやIDを呼び出すためのものです。それが得る

$(.scroll-pane).hide();

：あなたのような何かをするときので

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

あなたはすべてのJScrollPanesを隠す：

は、zインデックスを理解することについては、次の資料を見てください.scroll-paneが自分自身に割り当てられているすべてのクラスは、あなたの例で3つすべてを取得することを意味します。

$(.scroll-pane-1).hide();

$(.scroll-pane-2).show();

をすることにより：

これを解決する方法は、あなたが個別に非表示にし、次にんjqueryのを持ちたい各ペインのための.scroll-pane-1.scroll-pane-2のようなユニークなクラス名を持っているのいずれかでありますonclick、onloadのような異なるポイントでそれぞれのペインごとに非表示関数を呼び出すことができ、それを呼び出すときに依存する特定の関数に影響します。あなたのケースでは

は、しかし、あなただけ行うことができます：あなたはすでに独自のdivのidを持っているし、我々はショーを呼び出し、jqueriesセレクタを使って、それらに非表示にすることができますので、

<script> 
var index = 0 

$('#target').click(function() { 

if(index == 0) 
    { 
     `$(#div1).hide();` 
     `$(#div2).show();` 
     `$(#div3).hide();` 
     index = 1; 

    } 
if(index == 1) 
    { 
     `$(#div1).hide();` 
     `$(#div2).hide();` 
     `$(#div3).show();` 
     index = 2; 
    } 
if(index == 2) 
    { 
     `$(#div1).show();` 
     `$(#div2).hide();` 
     `$(#div3).hide();` 
     index = 0; 
    } 

}); 
</script> 

それは結果を生成します。

クリックに基づいて変化する整数変数を作成しました。ターゲットのIDタグを持つリンクやボタンをクリックしたときに整数値をチェックし、その値に基づいて次回クリック時に異なる結果を表示できます値は異なるため、異なるオブジェクトを表示したり隠したりします。