Question

我一直在试图用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>

总是看起来像这样： enter image description here

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

[EDIT1]我改变了一下代码。我在表单周围添加了带有向导id的div容器（更新了代码和图像）。所以我得到了容器以及下面的'Next'和'Prev'按钮。但仍然没有功能。有人可以给我下一个面包过关吗？ [\ EDIT1]

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

Answer 1

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

onStepChanging:

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

jquery.steps没有显示出来

1 个答案: