720px를 초과하는 것을 숨기고 숨겨진 영역 onClick을 표시 하시겠습니까?

Question

<li>의 묶음을 서로의 옆에 놓고 상자 모양으로 보이려고합니다. 매번 10을 표시합니다. 나머지는 숨겨져 onClick으로 표시됩니다. 같은 <ul>에 배치 할의가 가지고있는 <li>

및이 없거나 같은 클래스 :

그래서 다음과 비슷한 모습이 될 것입니다. 그래서 기본적으로 HTML은 다음과 같이 보일 것입니다 :

<ul id="bxs" class="tab1"> 
    <li id="item-1">1</li> 
    <li id="item-2">2</li> 
    <li id="item-3">3</li> 
    <li id="item-4">4</li> 
    <li id="item-5">5</li> 
    <li id="item-6">6</li> 
    <li id="item-7">7</li> 
    <li id="item-8">8</li> 
    <li id="item-9">9</li> 
    <li id="item-10">10</li> 
    <li id="item-11">11</li> 
    <li id="item-12">12</li> 
    <li id="item-13">13</li> 
    <li id="item-14">14</li> 
    <li id="item-15">15</li> 
    <li id="item-16">16</li> 
    <li id="item-17">17</li> 
    <li id="item-18">18</li> 
    <li id="item-19">19</li> 
    <li id="item-20">20</li> 
</ul> 

... 이것은 내 질문입니다. 어떻게하면 그 사람들을 다음과 같이 행동하게 할 수 있습니다 : http://jsfiddle.net/mnCck/6/show/ 버튼을 클릭하면 다른 10 개가 나타납니다. (예를 들어 2 ul을 사용하고 하나를 숨기고 다른 onClick을 표시합니다)

왜 나는 이것을해야합니까?

기본적으로 이것은 클라이언트의 작은 북마크 페이지입니다. 박스는 북마크가 될 것이고 동적으로 다음과 같이 하나씩 생성 될 것입니다 : http://jsfiddle.net/WNZdr/show/ 그래서 당신이 알아 차리면 상자를 만들 때마다 ID를 얻고 위의 html과 같이 끝납니다. 상자 중 10 개만 보이게하고 클라이언트가 그 한계에 도달하면 상자가 숨겨지고 다른 탭에있는 것처럼 보이게되어 탐색 버튼을 사용하여 액세스 할 수있게됩니다.

나는 자바 스크립트 또는 CSS에 익숙하지 않다.이 방법을 생각할 수 없다. div의 ontop은 720px의 범위를 벗어나는 모든 것을 숨기고, nav 버튼을 클릭하면 li을 숨기고, CSS를 오른쪽으로 밀어서 (720px) 다시 표시합니다. 그러면 그들이 탭에 있다고 느끼고 느낄 것인가?

죄송합니다. 제목이 어떻게 든 혼란 스럽다면 제목에이 모든 것을 설명하는 법을 모르겠습니다.

Answer 1

참고 : 질문에 javascript 또는 jquery 태그가 지정되지 않았지만 예제에서 jquery가 사용되었으므로 해결책도 있다고 가정했습니다.

overflow: hidden을 사용하고 scrollTop을 조정할 수 있습니다.

http://jsfiddle.net/WNZdr/1/

$("#prev").click(function() { 
     page--; 
     if (page < 0) page = 0; 

     $("#bxs").scrollTop(page * 70); 

    }); 

    $("#next").click(function() { 
     page++; 

     $("#bxs").scrollTop(page * 70); 

     // adjust in case next was clicked and there are no more 
     page = $("#bxs").scrollTop()/70; 
    }); 

이 높이/오프셋이 바로 얻기 위해 약간의 tweeking이 필요하지만, 기본적인 아이디어를 제공합니다.