Jquery 问题：如何分解多部分表单，以便一次只能看到一个字段集？

Question

我牢牢掌握 XHTML 和 CSS，但 PHP 和 Javascript 对我来说就像魔法一样。

我正在使用基于 PHP 的Textpattern CMS 构建一个讨论站点。用户登录后，可以使用公共端表单添加新的讨论主题。有很多输入字段，由单个 form 元素中的 HTML fieldset 元素分组，该元素将新行添加到特定的数据库表。我想做的是一次只显示一个字段集，插入上一个和下一个链接，让人们可以在字段集。

Textpattern 与 jquery 捆绑在一起，我找到了 jquery plugin that describes this functionality。但我无法让它工作。

这是我在文档head 中的内容：

<style type="text/css" media="screen">
    fieldset {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"></script>
<script type="text/javascript" language="javascript">
    $('#step1').bindStep('#step2');
    $('#step2').bindStep('#step3');

    $('#step1').show();
</script>

我的表格是这样的：

<fieldset id="step1">
    <legend>Step 1 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step2">
    <legend>Step 2 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step3">
    <legend>Step 3 Fields</legend>
    <!-- fields -->
</fieldset>
<input type="submit" value="Post this Article!" />

结果是style 声明隐藏了每个 fieldset，但脚本根本没有显示step1。我已经仔细检查了所有文件路径，并使用本地 jquery 包的链接而不是 Google 版本的链接进行了尝试，但我得到了相同的结果。

如果我能做到这一点，我会很高兴，但如果有另一种方法可以在没有 babysteps 插件的情况下实现这一点，我也会对这个结果感到满意。

您能提供的任何指导或具体建议将不胜感激！分步说明或实用的故障排除问题（您的计算机是否已接通电源？）也可能会有所帮助。

提前致谢！

Answer 1

我不确定那个特定的插件，但只有 jquery：

$(function(){

    $('#gotoStep2').click(function(){
        $('#step1').hide();
        $('#step2').show();
        return false;
    });

});

你在哪里

<input type="button" id="gotoStep2" value="next &raquo;"/>

在步骤 1 中

还有你的 CSS：

#step2, #step3 //etc
{
    display: none;
}

我相信你可以弄清楚如何在你的所有步骤中重复这个:)

Answer 2

<script type="text/javascript" language="javascript">
  $(function(){
    $("#step1").bindStep("#step2");
    $("#step2").bindStep("#step3");

    $("#step1").show();
  });
</script>

如果这不起作用，请放弃该插件。 （说真的，甚至该页面上的演示都不起作用。）