jquery.steps 没有出现答案

【问题标题】：jquery.steps not showing upjquery.steps 没有出现
【发布时间】：2014-11-14 15:05:59
【问题描述】：

我一直在尝试使用 jQuery 的步骤表单制作这个网站。我浏览了多个关于如何使用它的教程，但它从来没有用过。它总是向我显示表单的全部内容，而没有“分页”样式步骤。

我使用了这个website中的一个例子：

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.steps.js"></script>
<link href="/Content/jquery.steps.css" rel="stylesheet">
</head>
<body>


    <form id="wizard" action="#">
        <h1>Account</h1>
        <fieldset>
            <legend>Account Information</legend>

            <label for="userName">User name *</label>
            <input id="userName" name="userName" type="text" class="required">
            <label for="password">Password *</label>
            <input id="password" name="password" type="text" class="required">
            <label for="confirm">Confirm Password *</label>
            <input id="confirm" name="confirm" type="text" class="required">
            <p>(*) Mandatory</p>
        </fieldset>

        <h1>Profile</h1>
        <fieldset>
            <legend>Profile Information</legend>

            <label for="name">First name *</label>
            <input id="name" name="name" type="text" class="required">
            <label for="surname">Last name *</label>
            <input id="surname" name="surname" type="text" class="required">
            <label for="email">Email *</label>
            <input id="email" name="email" type="text" class="required email">
            <label for="address">Address</label>
            <input id="address" name="address" type="text">
            <label for="age">Age (The warning step will show up if age is less than 18) *</label>
            <input id="age" name="age" type="text" class="required number">
            <p>(*) Mandatory</p>
        </fieldset>

        <h1>Warning</h1>
        <fieldset>
            <legend>You are to young</legend>

            <p>Please go away ;-)</p>
        </fieldset>

        <h1>Finish</h1>
        <fieldset>
            <legend>Terms and Conditions</legend>

            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
        </fieldset>
    </form>

</body>

<script>
$("#wizard").steps({
    bodyTag: "fieldset"
});
</script>

</html>

它总是看起来像这样：

有人可以帮忙吗？我做错了什么？

[EDIT1] 我稍微更改了代码。我在表单周围添加了带有向导 ID 的 div 容器（更新了代码和图像）。所以我得到了容器和下面的“下一个”和“上一个”按钮。但仍然没有功能。有人可以给我下一个面包屑吗？ [\EDIT1]

[EDIT2] 删除 div 容器并将表单 ID 更改为“向导”后，它看起来像这样。所以功能在那里，但表单的内容消失了。（更新代码和图片）[\EDIT2]

【问题讨论】：

您应该将您的 jQuery ($("#wizard").steps({...) 移动到文档的末尾或将其包装在 document.ready 调用中。
试过了，可惜没用
真正的“向导”ID在哪里？

标签： javascript jquery html wizard

【解决方案1】：

看看你链接到的页面底部，它正在调用事件

onStepChanging:

等等，你不是。主要文档是github jquery-steps docs

【讨论】：

这是添加验证时的后续步骤。现在我不想要任何验证。只是按步骤分页
把 id="wizard" 放在表单标签上
谢谢比利！看起来更好。现在我有了这个功能，但是表单的内容已经消失了。我有所有四个页面，我可以用按钮浏览它们，但没有内容，页面是空的。可能是什么问题？
在脚本标签内尝试var form = $("#wizard").show();以上$("#wizard").steps({ bodyTag: "fieldset"
我试过 'var form = $("#wizard").show();'，但是仍然没有内容