javascript - Jquery 问题 : How can I break up a multi-part form so that only one fieldset is visible at a time?

Question

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

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

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 声明隐藏了 every 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;
}

我相信你能想出如何对你的所有步骤重复这个:)