javascript - 隐藏超过 720px 的内容并在点击时显示隐藏区域？

Question

我正在尝试制作一堆 <li>彼此相邻放置，它们看起来像盒子；每次显示10。其余的将被隐藏并在点击时显示。

所以它应该看起来像这样:

<li>的必须放在同一个 <ul> 中并且没有或同一个类(class)。所以基本上 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 个框可见，当客户端达到该限制时，这些框将被隐藏，它们看起来就像在另一个选项卡中，因此可以使用导航按钮访问它们。

我不是 javascript 或 css 的新手，只是我想不出这样做的方法。我想在其上放置一个 div，它隐藏 720px 范围之外的所有内容，然后当单击导航按钮时，隐藏 li，用 css 将它们推到 right: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;
    });

这需要稍微调整一下才能使高度/偏移恰到好处，但给出了基本概念。