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を使用し、1つを非表示と他のonClickを表示）

なぜ私はこれをする必要がありますか？

基本的に、これはクライアントの小さなブックマークページです。ボックスはブックマークになり、次のように1つずつ動的に作成されます：http://jsfiddle.net/WNZdr/show/あなたが気づくと、ボックスを作成するたびにIDが取得され、上に貼り付けたhtmlのようになります。私はボックスの10だけを表示したいとクライアントが限界に達すると、ボックスは非表示になり、別のタブにあるように見えるので、ナビゲーションボタンを使ってアクセスすることができます。

私はjavascriptや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が必要ですが、基本的なアイデアを提供します。