将基本分页添加到多步骤表单答案

【问题标题】：Adding basic pagination to multiple step form将基本分页添加到多步骤表单
【发布时间】：2012-09-11 15:48:15
【问题描述】：

我正在使用 jQuery 创建一个多重 setep 表单。目前该功能是有限的 - 下一个按钮将成功引导用户进入下一组。我正在尝试实现某种分页，它将向用户显示他们当前所在的页面以及剩下的其他页面。

您可以在此处查看完整注释的 jsfiddle：http://jsfiddle.net/QmbNw/6/

理想情况下，我希望当前页面的列表项有一个 active 类，所以我可以设置不同的样式。当前显示的表单部分具有选定的类别。我需要想出一种方法来为每个列表项添加一个活动类，并具有与所选表单窗格的索引匹配的索引。看看 jsfiddle 就明白了。

此外，这些列表项应链接到该部分，以便它们可以点击。

更新：

我在其中添加了以下 jQuery，希望它能为当前列表项添加一个活动状态：

if($(this).hasClass("visible")){
     $(this).parent().find("li:nth-child(" + pageNum+ ")").addClass("active");
}

【问题讨论】：

【解决方案1】：

我很容易做到这一点：

这就是你要找的吗？

【讨论】：

我希望拥有 3 个持久列表项，其中一个在任何给定时间都会处于活动状态，因此它们在视觉上是可区分的。
我希望它能够动态工作，所以我不必为文章提供 ID（这样我就可以拥有尽可能多的文章）
我添加了以下 jquery 希望这会添加我需要的类，但它没有： if($(this).hasClass("visible")){ $(this).parent() .find("li:nth-child(" + pageNum+ ")").addClass("active"); }

【解决方案2】：

您可以使用jQuery tabs plugin - 使用 jQuery-UI，您会得到一个很棒的。

要序列化您的数据，请查看Mike Alsup jquery 表单插件。

【讨论】：

【解决方案3】：

我使用附加索引解决了它。请看这个jsfiddle：http://jsfiddle.net/Azxjt/

【讨论】：