jQuery步骤基本示例-字段不出现

时间:2019-04-05 11:41:31

标签: jquery

我正在尝试复制一个版本的JQuery步骤基本示例here 。我已经完全按照列出的代码复制了代码,并下载了样式表,但是在查看页面时,似乎没有输入字段。我的确切代码如下(直接从页面复制,减去验证。)

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/jquery.steps.js"></script>
  <script src="js/jquery.steps.min.js"></script>
  <script src="js/main.js"></script>
  <link rel="stylesheet" href="stepStyle.css"/>

</head>

<body>
  <form id="example-form" action="#">
      <div>
          <h3>Account</h3>
          <section>
              <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>
          </section>
          <h3>Profile</h3>
          <section>
              <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">
              <p>(*) Mandatory</p>
          </section>
          <h3>Hints</h3>
          <section>
              <ul>
                  <li>Foo</li>
                  <li>Bar</li>
                  <li>Foobar</li>
              </ul>
          </section>
          <h3>Finish</h3>
          <section>
              <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
          </section>
      </div>
  </form>
  <script>
var form = $("#example-form");
form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {

    },
    onFinishing: function (event, currentIndex)
    {

    },
    onFinished: function (event, currentIndex)
    {
        alert("Submitted!");
    }
});
</script>
</body>

</html>

0 个答案:

没有答案