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

Question

我正在使用jQuery创建多个setep表单。目前功能有限 - 下一个按钮将成功地将用户转到下一组。我尝试实施某种分页，它会向用户显示他们当前所在的页面以及剩下的其他页面。

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

理想情况下，我希望当前页面的列表项具有一个活动类，因此我可以采用不同的方式设置它。当前显示的表单部分有一个选定的类。我需要找到一种方法来为每个列表项添加一个active类，其中索引与所选表单窗格的索引匹配。看到j​​sfiddle，它会有意义。

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

更新：

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

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

请参阅jsfiddle了解上下文：http://jsfiddle.net/QmbNw/6/

Answer 1

我很容易通过以下方式做到这一点：

• 创建名为currentPage的变量
• 创建一个功能，以隐藏/显示基于currentPage的分页“标签”
• 创建的ID和类以帮助jquery驱动器页面操作

此处更新了此前文：http://jsfiddle.net/QmbNw/5/

这就是你要找的东西吗？

Answer 2

你可以使用jQuery tabs plugin - 你有一个很棒的jQuery-UI。

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

Answer 3

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