使用JavaScript的多个页面

我的HTML目前只生成一个页面。根据选择的“产品”，我想使用“多页”功能，使用javascript插入

以下是一些示例代码：

<div id="products">

  <div id="product-1" class="product">
    <a href="/product/marco" title="View marco" class="product-a">
      <span class="stilt"></span>
      <div class="product-info"><h3 class="product-title"><span>marco</span></h3><p class="product-price"><span><span class="currency_sign">€</span>23.00</span></p></div>
    </a>
  </div>

  <div id="product-2" class="product">
    <a href="/product/la-regola-dell-amico" title="View la regola dell'amico" class="product-a">
      <span class="stilt"></span>
      <div class="product-info"><h3 class="product-title"><span>la regola dell'amico</span></h3><p class="product-price"><span><span class="currency_sign">€</span>22.00</span></p></div>
    </a>
  </div>
.
.
.
</div>

.
.
.

例如，我想将“products”div拆分为多个页面，用于id为“product-9”的内部div。我该怎么做

编辑 可能不清楚，我有很多产品，我希望每页显示9个产品

关键在于：

function togglePage(page)
{
    for (var i = 1 ; i < pageSize  + 1; i++)
    {
        $("#product-" + ((page * pageSize) + i)).toggle();

    }
}

功能切换页面（第页）
{
对于（变量i=1；i

您可以使用更复杂的选择器以更少的代码完成这项工作，但我一直保持简单，让非jQuery用户能够阅读

基本上，我是根据页面大小计算每次要显示的项目。为了简单起见，我将其限制为两个。CSS有display：默认情况下，没有要隐藏的内容

---

页码上没有上限检查，但创建一些并不十分困难。

您是否使用prototype js、jquery或moo工具？这是否意味着您希望以9个产品块的形式显示产品？即展示产品1至9，然后展示产品10至18，等等？你的问题对我来说不是很清楚。@FelixKling是的，我想每9个产品分割我的div。如果产品数量很大，创建一个AJAX服务来加载成批的产品页面可能是明智的。jQuery将是实现这一点的一个很好的选择。这样，您的DOM保持较小，您可以动态加载内容，而不是一次加载所有内容。@JeffWatkins我不能，我必须向预构建的电子商务脚本添加功能，我不能创建页面，我只能添加一些javascript来添加商店没有的功能，主页包含商店中的所有产品，我需要将它们分成不同的页面。在接受答案之前，我想知道这是最好的方式还是有其他更好的方式