Izinkan saya menunjukkan rendering terlebih dahulu. Jika Anda merasa cukup bagus, silakan merujuk ke kode implementasi!
Html:
<div> <ul> <li> <p class = 'iden_add_name'> Aplikasi ID1 </p> <span> </span> <viv> </div> </li> </ul> <span>+</span> </div> <div> <div> <span> </span> <div> x </div> </div> <div> <!-<viv> </div>-> <viv> <ul> <li> <!-<span> ID aplikasi: </span> <span> <input type = "text" placeholder = "app =" ID1 "> </span>-> </li> </ul> </div> <div> <button> Batal </button> <button> Simpan </button> <button> Konfirmasi </button> </div> </div>
CSS:
.iden_top {Lebar: 100%; border-bottom: 1px solid #ccc; tinggi: 37px; line-height: 35px;}. IDEN_TOP UL LI {HEIGHT: 37PX; Line-Height: 35px; kursor: pointer; lebar: auto; padding: 0px 10px; latar belakang-warna: #eee; float: kiri; perbatasan-radius: 5px 5px 0px; Border: 1px solid #ccc; margin-bottom: -1px; } .iden_add {float: left; margin -top: -9px; kursor: pointer; Tampilan: inline-block; Teks-Align: tengah; font-size: 25px; Lebar: 40px; Tinggi: 36px; Warna: #2B98FC; font-weight: tebal; latar belakang-warna: #EEE; Border: 1px solid #ccc; border-radius: 5px 5px 0px 0px;}. iden_top_button {display: inline-block; lebar: 20px; Tinggi: 20px; latar belakang-gambar: url (../ img/xiug.png); latar belakang-repeat: no-repeat; latar belakang ukuran: 100%; margin: 7px 0px 0px 5px; float: kiri;}. iden_top_dete {float: kanan; lebar: 20px; Tinggi: 20px; latar belakang-gambar: url (../ img/close.png); latar belakang-repeat: no-repeat; latar belakang ukuran: 100%; margin: 7px 0px 0px 5px; float: kanan;}. iden_add_name {float: kiri; } .data_z_create_box {display: none; Lebar: 600px; Min-Height: 200px; Latar Belakang-Color: #FFFF; Perbatasan: 1px solid #ccc; Border-Radius: 5px; Posisi: Absolute; Z-Index: 44; TOP: 10%; Kiri: 50%; margin-kiri: -300px; kotak-shadow: 0px 5px 10px #666} .data_z_create_box_center_quxiao {latar belakang-warna: #ea5d5b; color: #ffff; margin-right: 10px; Lebar: Auto! Penting; padding: 0px 10px;}. Data_Z_Create_Box_Center_QUXIAO: Hover {latar belakang-warna: #d2322d;}. Data_tips {padding: 10px; Lebar: 90%; margin: 0px auto; Warna: #a94442; latar belakang-warna: #f2dede; Border: 1px solid #ebccd1; perbatasan-radius: 5px;}. Data_input {tinggi: otomatis; padding: 0px 30px;}. Data_input ul li {50px; line-height: 50px;}. Data_input_input Input {Text-Indent: 10px; Lebar: 70%; Tinggi: 40px; Line-Height: 40px; Border-Radius: 5px; Border: 1px solid #ccc;}. Data_input_tips {margin-left: 5%; display: none;}. data_z_create_box_top_title {margin-left: 20px; font-weight: bold;}. shua {margin-top: 20px; font: kiri; bold; float: right;}. data_state_buttonl_tips {color: #4cae4c; font-weight: bold; display: none;}JS:
$(document).ready(function(e) {var $_div = $("<div class='_id_tips'>Confirm to delete this app ID?</div>")var $_span1 = $("<span class='data_input_title'>App ID: </span><span class='data_input_input'><input type='text' Placeholder = ''> </span> ") $ (". IDEN_TOP UL LI: EQ (0) "). CSS ({" Latar Belakang ":" #fff "," Border-Bottom ":" 1px Solid #FFFF "}). Anak-anak (). Li: eq (0) "). Anak -anak (". IDEN_ADD_NAME "). AddClass (" ll ") $ (". {$ ("#create_z"). show () $ (". Data_z_create_box"). Tampilkan (300) $ (". Data_Z_CREATE_BOX_TOP_TITLE"). html ("Ubah aplikasi Identifier ") $ (". Create_z_create_box_center_baocun "). Show (); $ (". Create_Z_CREATE_BOX_CENTER_QUEDING "). Sembunyikan (); $ (". Data_input Ul Li Div "). Remove (); $ (". Data_input ul li "). Apend ($ _). input "). val ($ (this) .siblings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). Klik (function () {$ ("#create_z"). hide () $ (". Data_z_create_box"). Sembunyikan (300) $ _ span1.remove ()}) $ (". Create_z_create_box_center_baocun"). Klik (function () {$ ("#create_z"). hide () $ (". Data_z_create_box"). Sembunyikan (300) $ (". ll"). Teks ($ (ini) .parent () ldren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). Klik (function () {$ ("#create_z"). Hide () $ (". Data_z_create_box"). Sembunyikan (300) $ _ span1.remove ()}) var a = 2; $ (". IDEN_ADD"). (Fungsi () {var clis = $ (". class='iden_add_name'>Application ID<span>" + a + "</span></p><span></span><div></div></li>");$(".iden_top ul").append($_li);$_li.css({"background-color": "#fff","border-bottom": "1px solid #ffff"}).children("div").addClass("iden_top_dete");$_li.children("span").addClass("iden_top_button")$_li.siblings().css({"background-color": "#eee","border-bottom": "1px solid #CCC "}). Anak -anak (" Div "). Removeclass (" iden_top_dete "); $ _ li.siblings (). Anak -anak (" span "). Removeclass (" iden_top_button "); $ _ li.Children (".iden_add_name"). AddClass ("ll"); $ _ li.siblings (). Anak -anak (". IDEN_ADD_NAME"). Removeclass ("ll"); $ (". {$ (this) .parent ($ _ li) .addclass ("qq") $ ("#create_z"). show () $ (". Data_z_create_box"). Tampilkan (300) $ (". Data_Z_CREATE_BOX_TOP_TITLE" ) .html ("Tip") $ (". Create_z_Create_Box_Center_Baocun"). Hide (); $ (". Create_z_create_box_center_queding"). Show (); $ (". Data_input Ul li span "). Remove (); $ (". Data_input ul li "). Append ($ _ Div)}) $ (". Create_Z_CREATE_BOX_CENTER_QUXIAO "). Klik (function () {$ ("#create_z "). Hide () $ (". Data_z_create_box "). Li "). RemoveClass (" qq ")}) $ (". Create_z_create_box_center_queding "). Klik (fungsi () {$ (". QQ "). Remove () $ ("#create_z "). Sembunyikan () $ (". Data_Z_CREATE_BOX "). Hide (300) $ Li: eq (0) "). css ({" latar belakang-warna ":" #fff "," border-bottom ":" 1px solid #fff "}). anak-anak (" span "). addClass (" iden_top_button ")} $ (". iden_top_button "). Function (). {$ ("#create_z"). show () $ (". Data_z_create_box"). Tampilkan (300) $ (". Data_Z_CREATE_BOX_TOP_TITLE"). html ("Ubah aplikasi Identifier ") $ (". Create_z_create_box_center_baocun "). Show (); $ (". Create_Z_CREATE_BOX_CENTER_QUEDING "). Sembunyikan (); $ (". Data_input Ul Li Div "). Remove (); $ (". Data_input ul li "). Apend ($ _). input "). val ($ (this) .siblings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). Klik (function () {$ ("#create_z"). hide () $ (". Data_z_create_box"). Sembunyikan (300) $ _ span1.remove ()}) $ (". Create_z_create_box_center_baocun"). Klik (function () {$ ("#create_z"). hide () $ (". Data_z_create_box"). Sembunyikan (300) $ (". ll"). Teks ($ (ini) .parent () ldren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). Klik (function () {$ ("#create_z"). hide () $ (". Data_z_create_box"). Sembunyikan (300) $ _ span1.remove ()}) clis ++; a ++;} $ (". IDEN_TOP UL LI"). Klik () () {$ (ini) .csss ({"latar belakang" " #ffff"}).children("div").addClass("iden_top_dete");$(this).children("span").addClass("iden_top_button")$(this).siblings().css({"background-color": "#eee","border-bottom": "1px solid #CCC "}). Anak -anak (" Div "). Removeclass (" iden_top_dete "); $ (ini) .SIBLINGS (). Anak -anak (" Span "). Removeclass (" IDEN_TOP_BUTTON "); $ (". IDEN_TOP UL Li: eq (0) "). Anak -anak (" Div "). RemoveClass (" IDEN_TOP_DETE "); $ (ini) .Children (". IDEN_ADD_NAME "). AddClass (" ll "); $ (ini) .siblings (). Anak -anak (". IDEN_ADD_NAME ").Di atas adalah kode menambahkan hapus dan memodifikasi navigasi tab berdasarkan HTML+CSS+JS yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!