Блог

Главная - Вопросы по программированию - Базовый пример шагов Jquery — поля не отображаются

Базовый пример шагов Jquery — поля не отображаются

#jquery

#jquery

Вопрос:

Я пытаюсь скопировать версию базовых примеров шагов jQuery, найденных здесь. Я скопировал код точно так, как там указано, а также загрузил таблицу стилей, однако при просмотре страницы ни одно из полей ввода не отображается. Мой точный код выглядит следующим образом (скопирован непосредственно со страницы, за вычетом проверки.)

 <!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>

Комментарии:

1. Ну, вы можете скопировать и вставить свой код в JSFiddle , и вы увидите поля. Кроме того, вы включили jQuery? (не то, чтобы его исключение каким-либо образом скрывало поля)

2. кажется, разметка правильно анализируется в моем браузере Chrome. Смотрите изображение здесь ibb.co/tx5m1Gs . Но вы должны загрузить jQuery и сохранить библиотеки в папке с именем «js» в соответствии с вашим кодом, чтобы заставить его применять части jquery. Но вам не нужен jQuery для отображения HTML-разметки