여러 jScrollPanes가 겹쳐져 다른 사용자의 액세스를 차단합니다.

Question

링크를 클릭하면 jQuery를 통해 콘텐츠가 변경되는 "1 페이지"웹 사이트가 있습니다. 그 자리에서 사라질 것이다 (이전에 숨겨진)는 예를 들어, 하나 개의 링크를 클릭하면

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

그래서 "div1"이 페이드 아웃하고 "DIV2"여기

는 상기 DIV 레이아웃의 샘플입니다. 모든 DIV는 서로 동일한 CSS 위치를가집니다. 내 DIV에는 모두 jScrollPane이 있지만, 서로의 위에 쌓아 놓은 것처럼 보이며 div3의 창은 다른 모든 창의 위에 그려져 있습니다. 아마 HTML에서 만들어진 순서와 관련이 있다고 생각하니? 2의 창은 1의 창 위에 있고 3의 창은 2와 1의 창 위에 있습니다.

div3의 내용이 모두 숨겨져 있어도 창은 계속 보이고 나머지 두 DIV는 아래에 겹칩니다. 그래서 나는 Div3의 스크롤 기능에 대해서만 부끄럽지 만 다른 DIV는 '아래'에 있고 도달 할 수는 없다.

JScrollPane을 숨길 수는 있지만 동시에 모든 것을 처리 할 수있는 것 같습니다. jScrollPane을 숨기라고 말하면 그들은 모두 숨 깁니다 ... 페이드 인 및 페이드 아웃 될 때 jScrollPane의 클래스가 아닌 DIV의 zIndex를 변경하려고 시도했지만 패널 자체의 zIndex는 변경되지 않습니다. 나는 또한 DIVs를 숨기고 그러나 창은 뒤에 남아있다.

jScrollPane을 개별적으로 제어하고 zIndex를 변경하거나 실제로 사라지게하지 않고 DIV와 함께 개별적으로 숨길 수있는 방법이 있습니까?

도움을 주시면 대단히 감사하겠습니다.

Answer 1

하나만 표시하고 jquery를 사용하고 있다고 가정합니다.

html order div 3과 똑같은 점은 다른 div 위의 같은 위치에로드 될 다른 div와 같은 위치에 놓으면 자연스럽지 않게 지속된다는 것입니다.

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

$(.scroll-pane).css(z-index, 1); // 클래스

통지의 차이 사이에 대한 위해 : 당신이 수행하여 사업부 또는 HTML 요소의 z-index 속성을 변경할 수 있습니다 JQuery와에

# 및. 호출 클래스 또는 id에 대한. 당신은 같은 것을 할 때 귀하의 모든 JScrollPane의 숨어

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

때문에 :

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

을 그것은 얻을 것이다

은 이해 Z-색인에 대한 다음 문서에서보세요 .scroll-pane이 자신에게 할당 된 모든 클래스는 예제에서 세 개의 클래스 모두를 가져옵니다.

$(.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 태그가있는 링크 나 버튼을 클릭하면 정수가 어떤 값인지 확인하고 그 값에 따라 다른 결과를 표시 할 수 있습니다. 다음에 클릭 할 때 값은 따라서 다른 개체를 표시하고 숨길 수 있습니다.