jquery步驟無法正常顯示

我一直有問題創建一個jquery步驟表單模板，我已經通過網站上顯示，但仍然有一個模板顯示不正確，請幫助我。jquery步驟無法正常顯示

代碼是顯示如下：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Demo</title> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="css/jquery.steps.css"> 
     <script src="js/jquery.steps.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <script> 
      $("#wizard").steps();   

      var form = $("#example-advanced-form").show(); 

      form.steps({ 
       headerTag: "h3", 
       bodyTag: "fieldset", 
       transitionEffect: "slideLeft", 
       onStepChanging: function (event, currentIndex, newIndex) 
       { 
        // Allways allow previous action even if the current form is not valid! 
        if (currentIndex > newIndex) 
        { 
         return true; 
        } 
        // Forbid next action on "Warning" step if the user is to young 
        if (newIndex === 3 && Number($("#age-2").val()) < 18) 
        { 
         return false; 
        } 
        // Needed in some cases if the user went back (clean up) 
        if (currentIndex < newIndex) 
        { 
         // To remove error styles 
         form.find(".body:eq(" + newIndex + ") label.error").remove(); 
         form.find(".body:eq(" + newIndex + ") .error").removeClass("error"); 
        } 
        form.validate().settings.ignore = ":disabled,:hidden"; 
        return form.valid(); 
       }, 
       onStepChanged: function (event, currentIndex, priorIndex) 
       { 
        // Used to skip the "Warning" step if the user is old enough. 
        if (currentIndex === 2 && Number($("#age-2").val()) >= 18) 
        { 
         form.steps("next"); 
        } 
        // Used to skip the "Warning" step if the user is old enough and wants to the previous step. 
        if (currentIndex === 2 && priorIndex === 3) 
        { 
         form.steps("previous"); 
        } 
       }, 
       onFinishing: function (event, currentIndex) 
       { 
        form.validate().settings.ignore = ":disabled"; 
        return form.valid(); 
       }, 
       onFinished: function (event, currentIndex) 
       { 
        alert("Submitted!"); 
       } 
      }).validate({ 
       errorPlacement: function errorPlacement(error, element) { element.before(error); }, 
       rules: { 
        confirm: { 
         equalTo: "#password-2" 
        } 
       } 
      }); 


     </script> 
     <div id="wizard"> 
      <form id="example-advanced-form" action="#"> 
       <h3>Account</h3> 
       <fieldset> 
        <legend>Account Information</legend> 
        <label for="userName-2">User name *</label> 
        <input id="userName-2" name="userName" type="text" class="required"> 
        <label for="password-2">Password *</label> 
        <input id="password-2" name="password" type="text" class="required"> 
        <label for="confirm-2">Confirm Password *</label> 
        <input id="confirm-2" name="confirm" type="text" class="required"> 
        <p>(*) Mandatory</p> 
       </fieldset> 
       <h3>Profile</h3> 
       <fieldset> 
        <legend>Profile Information</legend>  
        <label for="name-2">First name *</label> 
        <input id="name-2" name="name" type="text" class="required"> 
        <label for="surname-2">Last name *</label> 
        <input id="surname-2" name="surname" type="text" class="required"> 
        <label for="email-2">Email *</label> 
        <input id="email-2" name="email" type="text" class="required email"> 
        <label for="address-2">Address</label> 
        <input id="address-2" name="address" type="text"> 
        <label for="age-2">Age (The warning step will show up if age is less than 18) *</label> 
        <input id="age-2" name="age" type="text" class="required number"> 
        <p>(*) Mandatory</p> 
       </fieldset>   
       <h3>Warning</h3> 
       <fieldset> 
        <legend>You are to young</legend> 
        <p>Please go away ;-)</p> 
       </fieldset> 
       <h3>Finish</h3> 
       <fieldset> 
        <legend>Terms and Conditions</legend>   
        <input id="acceptTerms-2" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label> 
       </fieldset> 
      </form> 
     </div> 
    </body> 
</html>

來源

2016-07-05 GaryM1981

如果你還沒有找到答案了你所需要的基本的CSS

https://github.com/rstaib/jquery-steps/blob/master/demo/css/jquery.steps.css

真正奇怪的是，CSS不正常分發或任何提及步驟文檔http://www.jquery-steps.com/Documentation所需的CSS，除了有用的修改，但沒有基本的CSS。我以前從來沒有過這樣的事。

來源

2016-07-31 12:10:27 BeNice

感謝您的回覆，但我不得不嘗試不同的東西。 – GaryM1981

有興趣的話，如果你使用了一些替代Jquery Steps的東西。看過它，但它有點痛苦。您是否在使用替代方案，構建您自己的解決方案，還是僅僅將它提交給提交？ – BeNice

jquery步驟無法正常顯示

回答

相關問題