오버플로 표시 : 숨겨진 DIVS 클릭시

Question

비슷한 질문을 본 적이 있지만 원하는 방식으로 찾을 수없는 것 같습니다. 아마 jQuery에 대한 최소한의 지식 만 가지고 있기 때문일 수 있습니다.

기본적으로이 경우입니다. 저는 10 개의 DIVS를 포함하는 페이지를 가지고 있습니다, # page1에서 # page10까지 말하십시오. 오버플로를 숨김으로 설정하여 첫 번째 DIV 만 # page1이 뷰포트에 표시됩니다. 클릭에 연속 된 다음 및 이전 DIV를 표시하는 방법이 있습니까? "이전"및 "다음"링크가 어딘가에 있다고 말할까요?

편집

내 원래의 아이디어는 DIV 오버 플로우가 숨겨 가지고 있고 DIV로 스크롤했지만 @ 스티브에 의해 주어진 솔루션은 내가 필요로했던 것으로 나타났습니다. 오버플로 숨겨진 솔루션에 대해서는 @VisioN이 설명했습니다.

Answer 1

첫째로 당신 말했다 오버 플로우 : 숨겨진 ..... 당신이 실제로 Visibilily 의미합니까 : 숨겨진하거나 표시 : 없음?

표시 없음을 사용하여 예제를 만들었습니다.

http://jsfiddle.net/4HpXz/4/

현재 이미 지난 사업부에 "다음"을 클릭하면 처리하지 않지만, 예를 들어 다음을 클릭하면 당신은 다음 링크를 숨기거나 마지막 사업부를 숨길 정도로는 영리 만들 수 중

JS

$(function(){ 

    $('.next').click(function(){ 
     $('.page.show') 
      .removeClass('show') 
      .next() 
      .addClass('show'); 
    }); 

    $('.prev').click(function(){ 
     $('.page.show') 
      .removeClass('show') 
      .prev() 
      .addClass('show'); 
    }); 

}); 

HTML

<div class="page show">Page1</div> 
<div class="page">Page2</div> 
<div class="page">Page3</div> 
<div class="page">Page4</div> 
<div class="page">Page5</div> 
<div class="page">Page6</div> 
<div class="page">Page7</div> 
<div class="page">Page8</div> 
<div class="page">Page9</div> 
<div class="page">Page10</div>​ 

내가 제대로 이해하면

CSS

.page{ 
    display: none; 
} 
.show{ 
    display: block; 
} 
​ 

Answer 2

해당 div에 슬라이드 효과를 적용 할 수 있습니다. 예를 들어

:

var firstpage = $('#container div#page1'), 
     pgwidth = firstpage.outerWidth(); 

$('.prevButton').on('click', function() { 
    firstpage.animate({ 
    'margin-left' : '-=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to left 
    },300); 
}); 


$('.prevButton').on('click', function() { 
    firstpage.animate({ 
    'margin-left' : '+=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to right 
    },300); 
}); 

Answer 3

글쎄, 당신은 scrollIntoView() 방법을 살펴 있어야합니다.

제목에서 알 수 있듯이 요소를보기로 스크롤합니다. 이것은 매우 기본적이고 IE6에서도 지원됩니다.

DEMO :이 http://jsfiddle.net/8D2jB/