كنا في الأصل شكل طويل جدا مع العديد من الخيارات. ملاحظات العملاء ليست ودية بما يكفي وسهلة رؤيتها. لذلك ، يتم إجراء تحسينات لتحقيق تقدم متعدد الخطوات وتنفيذ عمليات التقديم المتعددة (في الواقع ، لا يوجد سوى تقديم نموذج واحد).
فكرة التنفيذ: قم بتحميل خيارات النموذج إلى divs متعددة ، ويظهر واحد ، والآخرون يختبئون .
التأثير على النحو التالي:
1. كود جافا سكريبت
<script type = "text/javaScript" src = "js/jquery.js"> </script> <script type = "text/javaScript" src = "js/jquery-powerfloat.js type = "text/javaScript"> $ (function () {$ (". $ ("#واحد"). Hide () ؛ $ ("#two"). show () ؛ $ ("#grxx"). attr ("class" ، "current_prev") ؛ $ ("#zjxx"). attr ("class" ، "current") ؛ }} الوظيفة two () {if ("تأكيد (" تأكيد الالتزام؟ ")) {$ ("#two "). Hide () ؛ $ ("#ثلاثة"). show () ؛ $ ("#grxx"). attr ("class" ، "done") ؛ $ ("#zjxx"). attr ("class" ، "current_prev") ؛ $ ("#qzxx"). attr ("class" ، "current") ؛ }} الوظيفة Three () {if ("تأكيد (" تأكيد الالتزام؟ ")) {$ ("##ثلاثة "). Hide () ؛ $ ("#أربعة"). show () ؛ $ ("#grxx"). attr ("class" ، "done") ؛ $ ("#zjxx"). attr ("class" ، "done") ؛ $ ("#qzxx"). attr ("class" ، "current_prev") ؛ $ ("#qzfs"). attr ("class" ، "current") ؛ }} وظيفة Reone () {if ("تأكيد (" تأكيد العائد؟ ")) {$ ("#one "). show () ؛ $ ("#two"). Hide () ؛ $ ("#grxx"). attr ("class" ، "current") ؛ $ ("#zjxx"). attr ("class" ، "") ؛ }} function retwo () {if ("تأكيد (تأكيد العائد؟")) {$ ("#ثلاثة"). Hide () ؛ $ ("#two"). show () ؛ $ ("#grxx"). attr ("class" ، "current_prev") ؛ $ ("#zjxx"). attr ("class" ، "current") ؛ $ ("#qzxx"). attr ("class" ، "") ؛ }} function rethree () {if ("تأكيد (تأكيد العائد؟")) {$ ("#أربعة"). Hide () ؛ $ ("#ثلاثة"). show () ؛ $ ("#grxx"). attr ("class" ، "done") ؛ $ ("#zjxx"). attr ("class" ، "current_prev") ؛ $ ("#qzxx"). attr ("class" ، "current") ؛ $ ("#qzfs"). attr ("class" ، "last") ؛؛ }} </script>2. رمز CSS
<type type = "text/css">. flow_steps ul li {float: left ؛ الارتفاع: 23 بكسل ؛ Padding: 0 40px 0 30px ؛ Line-Leight: 23px ؛ محاذاة النص: المركز ؛ الخلفية: url (img/barbg.png) no-repeat 100 ٪ 0 #e4e4 ؛ Font-Weight: Bold ؛}. Flow_steps ul li.done {background-position: 100 ٪ -46px ؛ خلفية اللون:#ffeda2 ؛}. flow_steps ul li.current_prev {background-position: 100 ٪ -23px ؛ خلفية اللون:#ffeda2 ؛}. flow_steps ul li.current {color: #fff ؛ خلفية اللون:#990d1b ؛}. Flow_steps ul li.last {background-image: none ؛} </style>3. كود HTML
<Body> <body> <tr> <td> <viv> <ul style = "type-style-type: none"> <li id = "grxx"> المعلومات الشخصية </li> <li id = "zjxx" </td> </tr> <tr> <td> <form action = ""> <div id = "one"> <table align = "center" <tr> <td> الموقع الموقع: </td> <td> <type type = "text" "placehold =" الرجاء احتمال موقع التسجيل الأساسي "/>/td> type = "text" placeholder = "الرجاء إدخال اللقب الصيني"/> </td> </tr> <tr> <td> الاسم الصيني: </td> <td> <type type = "text" placeholder = "الرجاء إدخال الاسم الصيني"/> </td> </tr> <td> رقم بطاقة الهوية: </td> <td> /> </td> </tr> <tr> <td colspan = "2"> <button type = "button" onClick = "One ()"> إرسال </button> </td> </tr> </table> </div> <div> id = "two" style = "display: none"> <tabl align = "center> <td> placeholder = "الرجاء إدخال رقم المعرف"/> </td> </tr> <tr> <td> تاريخ انتهاء الصلاحية حتى </td> <td> <type type = "text" placeholder = "الرجاء إدخال رقم المعرف"/> </td> </td> <tr> <td> رقم الاتصال </td> <td> <input type = "text" placeholder = "الرجاء إدخال رقم الاتصال ، يوصى بأن يكون رقم هاتف محمول"/> </td> </td> <td> <td> <button type = "button" onClick = "two ()"> إرسال </td> <td> <td> <td> <button ". OnClick = "Reone ()"> السابق </button> </td> </tr> </table> </viv> <div id = "three" style = "display: none"> <table align = "center" <td> انتقل إلى المكان </td> <td> <type type = "text" placeholder = "الرجاء إدخال الوجهة"/> </td> </td> <tr> <td> نوع التأشيرة </td> <td> <tded = "text" OnClick = "Three ()"> إرسال </td> </td> <td> <button type = "button" onClick = "Retwo ()" type = "text" placeholder = "الرجاء إدخال طريقة جمع الأدلة"/> </td> </tr> <tr> <td> <button type = "button" onClick = ""> إرسال </button> </td> <td> <td> </thar> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </td> </tr> </table> </body> </html>
رمز المصدر تنزيل:
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.