jquery.steps没有显示

我一直在试图使这个网站的步骤形式从jQuery。我跑过了关于如何使用它的多个教程，但它永远不会工作。它总是向我显示没有“分页”样式步骤的表单的全部内容。jquery.steps没有显示

我从这次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

有人能帮忙吗？我在做什么错？

[编辑1]我改了一下代码。我在窗体周围添加了带有向导ID的div容器（更新了代码和图像）。所以我得到了容器和下面的'Next'和'Prev'按钮。但仍然没有功能。有人能给我下一个breadcrump吗？ [EDIT1]

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

来源

2014-11-14 RichiMartin

您应该将jQuery（'$（“＃wizard”）。steps（{...'）移动到文档的末尾或将其包装在document.ready调用中。 – j08691 2014-11-14 15:07:30

试过，可悲的是它没有区别 – RichiMartin 2014-11-14 15:10:22

实际的“向导”ID在哪里？ – jordaniac89 2014-11-14 15:36:35

看你的联系，它调用事件

onStepChanging:

等页面的底部，你不是。主要文档是github jquery-steps docs

来源

2014-11-14 15:21:59 Billy

这是后面的步骤，当添加验证时，现在我不想进行任何验证，只是将步骤 – RichiMartin 2014-11-14 15:26:49

的分页放在ID =“向导”上表单标签 – Billy 2014-11-14 15:30:56

感谢比利！看起来更好现在我有了功能，但是表单的内容已经消失了，我有四个页面，我可以用按钮浏览它们，但没有内容，页面是空的。可能是什么问题？ – RichiMartin 2014-11-14 15:43:42

jquery.steps没有显示

回答

相关问题