Kami awalnya bentuk yang sangat panjang dengan banyak pilihan. Umpan balik pelanggan tidak cukup ramah dan mudah dilihat. Oleh karena itu, perbaikan dilakukan untuk mencapai kemajuan multi-langkah dan implementasi pengiriman ganda (pada kenyataannya, hanya ada satu formulir pengiriman).
Gagasan Implementasi: Muat opsi formulir ke dalam beberapa div, satu menunjukkan, yang lain bersembunyi .
Efeknya adalah sebagai berikut:
1. Kode JavaScript
<type script = "Text/JavaScript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/jQuery-powerfloat.js"> </script> <tautan rel = "styles" href = "csss/powerfloat.csss type = "text/javascript"> $ (function () {$ (". $ ("#satu"). Hide (); $ ("#dua"). Show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("class", "current"); }} function two () {if (konfirmasi ("konfirmasi commit?")) {$ ("#dua"). Hide (); $ ("#tiga"). Show (); $ ("#grxx"). attr ("class", "done"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("class", "current"); }} function tiga () {if (konfirmasi ("konfirmasi commit?")) {$ ("#tiga"). Hide (); $ ("#empat"). Show (); $ ("#grxx"). attr ("class", "done"); $ ("#zjxx"). attr ("class", "done"); $ ("#qzxx"). attr ("class", "current_prev"); $ ("#qzfs"). attr ("class", "current"); }} fungsi reone () {if (konfirmasi ("konfirmasi kembali?")) {$ ("#satu"). show (); $ ("#dua"). Hide (); $ ("#grxx"). attr ("class", "current"); $ ("#zjxx"). attr ("class", ""); }} fungsi retwo () {if (konfirmasi ("konfirmasi return?")) {$ ("#tiga"). Hide (); $ ("#dua"). Show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("class", "current"); $ ("#qzxx"). attr ("class", ""); }} fungsi rethree () {if (konfirmasi ("konfirmasi return?")) {$ ("#empat"). Hide (); $ ("#tiga"). Show (); $ ("#grxx"). attr ("class", "done"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("class", "current"); $ ("#qzfs"). attr ("class", "last") ;; }} </script>2. Kode CSS
<style type = "text/css">. flow_steps ul li {float: left; Tinggi: 23px; padding: 0 40px 0 30px; Line-Height: 23px; Teks-Align: tengah; Latar Belakang: URL (IMG/Barbg.png) No-Repeat 100% 0 #E4E4; font-weight: bold;}. flow_steps ul li.done {latar belakang-posisi: 100% -46px; Latar Belakang-Color:#ffeda2;}. Flow_steps ul li.current_prev {latar belakang-posisi: 100% -23px; latar belakang-warna:#ffeda2;}. flow_steps ul li.current {color: #fff; latar belakang-warna:#990d1b;}. Flow_steps ul li.last {latar belakang-gambar: none;} </tyle>3. Kode HTML
<body> <table> <tr> <td> <div> <ul style="list-style-type:none"> <li id="grxx">Personal information</li> <li id="zjxx">Disclaimer information</li> <li id="qzxx">Sign up information</li> <li id="qzfs">Certification method</li> </ul> </div> </td> </td> </tr> <tr> <td> <form Action = ""> <Div id = "One"> <Table Align = "Center"> <tr> <td> Lokasi Lokasi: </td> <td> <input type = "Text" Placeholder = "Harap masukkan lokasi pendaftaran rumah tangga Anda"/</td> </TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> </TD> </TD> </TR> </TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> TR> type="text" placeholder="Please enter Chinese surname" /></td> </tr> <tr> <td>Chinese name: </td> <td><input type="text" placeholder="Please enter Chinese name" /></td> </tr> <tr> <td>Identity card number: </td> <td><input type="text" placeholder="Please enter ID number" /> </td> </tr> <tr> <td colspan = "2"> <Tombol type = "tombol" ontClick = "One ()"> Kirim </button> </td> </tr> </able> </div> <ver> ID = "dua" style = "non. Placeholder = "Silakan masukkan Nomor ID"/> </td> </tr> <tr> <td> Tanggal kedaluwarsa sampai </td> <td> <input type = "Text" placeholder = "Masukkan nomor ID"/> </td> </tr> <tr> <td> Nomor kontak </td> <td> </ttr> <TR> <td> Nomor kontak </td> <td> </ttr> <tr> <td> Nomor kontak </td> <td> </td = " </tr> <tr> <td> Nomor kontak </td> <td> <input type = "text" placeholder = "Harap masukkan nomor kontak, disarankan untuk menjadi nomor ponsel"/> </td> </tr> <td> </Tombol </Tombol/Tombol </Tombol = "Two ()"> KOMPON </TUTPRET> </TOLUME </TOMPLEK = "TOPLED </TOPLEK =" TwoT/TOLUME </TRANT> </TOMPET> </TUTPLICE </TOXT/TOMPLICE </TUTMLICE </TUTMLICE = " OnClick = "reone ()"> Sebelumnya </button> </td> </tr> </able> </div> <div id = "tiga" style = "display: none"> <table align = "center"> <tr> <td> TRIGNUKET </TD> <TD "<input type =" Text "Text" Place-name = "TRIGTER </TD> <td> <input type =" Text "Text" PlaceKholder = "PLEASE THE THE THE THE THE THE THE THE THE THE/TEPT" <td> Pergi ke tempat </td> <td> <input type = "text" placeholder = "Harap masukkan tujuan"/> </td> </tr> <tr> <td> Tipe visa </td> <td> </TypeT = "TEXT" PLACHOLDER = "Harap masukkan tipe visa"/</td> </TRD> <" OnClick = "Three ()"> Kirimkan </button> </td> <td> <Tombol type = "tombol" onclick = "retwo ()"> Sebelumnya </button> </td> </td> </tr> </Table> </Div> <v ID = "empat" style = "Tampilan: Tidak Ada"> Tabel Align = "Center" </TROD </T TRAY = "Tampilan Tidak Ada"> Tabel Align = "Center" </TRED </T TRAGE = "TABUHAN"> </TABLE/TABUT </T TRET> </T TAGU </T TRAGE = TABLE </TAGU </TAGET> type = "text" placeholder = "Harap masukkan metode pengumpulan bukti"/> </td> </tr> <tr> <td> <tombol type = "tombol" onclick = ""> Kirim </button> </td> <td> </typon = "TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TRID </TROT/TOLD/TOLD </TOBRE </TOLD/</TOLD/</TOLD/TOLD </TOLD/TOLD </ </td> </tr> </able> </body> </html>
Unduh Kode Sumber: http://xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.