Permettez-moi de vous montrer les rendus en premier. Si vous pensez que c'est assez bon, veuillez vous référer au code d'implémentation!
HTML:
<div> <ul> <li> <p class = 'iden_add_name'> Application id1 </p> <span> </span> <div> </div> </li> </ul> <span> + </span> </div> <div> <div> <span> </span> <div> x </div> </div> <div> <! - <div> </div> -> <div> <ul> <li> <! - <span> ID d'application: </span> <span> <input type = "text" placeholder = "appoly Id1 "> </span> -> </li> </ul> </ div> <v> <button> Annuler </futton> <futton> Enregistrer </ Button> <fontifié> Confirmer </utton> </div> </div>
CSS:
.IDEN_TOP {Width: 100%; Border-Bottom: 1px solide #ccc; hauteur: 37px; line-height: 35px;}. iden_top ul li {hauteur: 37px; hauteur de ligne: 35px; Cursor: Pointer; Largeur: Auto; Pandding: 0px 10px; Color d'arrière-plan: #eee; float: gauche; border-radius: 5px 5px 0px; bordure: 1px solide #ccc; margin-fond: -1px; } .iden_add {float: gauche; margin-top: -9px; curseur: pointeur; Affichage: Block en ligne; Text-Align: Centre; Font-Size: 25px; largeur: 40px; hauteur: 36px; couleur: # 2B98FC; Police-poids: Bold; Color d'arrière-plan: #eee; Border: 1px solide #ccc; border-radius: 5px 5px 0px 0px;}. iden_top_button {affichage: bloc en ligne; largeur: 20px; hauteur: 20px; Background-iMage: url (../ img / xiug.png); background-repeat: no-repeat; background-size: 100%; margin: 7px 0px 0px 5px; float: gauche;}. iden_top_dete {float: droite; width: 20px; hauteur: 20px; Background-Image: url (../ img / close.png); background-repeat: no-repeat; background-size: 100%; margin: 7px 0px 0px 5px; float: droite;}. iden_add_name {float: gauche; } .data_z_create_box {affichage: aucun; Largeur: 600px; Min-Height: 200px; Color d'arrière-plan: #FFFF; Border: 1px solide #ccc; Border-Radius: 5px; Position: Absolute; Z-Index: 44; en haut: 10%; gauche: 50%; margin-left: -300px; box-shadow: 0px 5px 10px # 666} .data_z_create_box_center_quxiao {background-colore: # ea5d5b; couleur: #ffff; margin-right: 10px; Largeur: Auto! Important; Padding: 0px 10px;}. Data_Z_Create_Box_Center_Quxiao: Hover {background-Color: # d2322d;}. data_tips {padding: 10px; Largeur: 90%; marge: 0px automatique; Couleur: # A94442; Background-Color: # F2DEDE; Border: 1Px Solid # EBCCD1; Border-Radius: 5px;}. Data_Input {Hight: Auto; Paddding: 0px 30px;}. Data_Input UL Li {Height: 50px; LINE-HEIGHT: 50px;}. data_input_input Input {text-indent: 10px; Largeur: 70%; hauteur: 40px; hauteur de ligne: 40px; Border-Radius: 5px; Border: 1px solide #ccc;}. data_input_tips {margin-left: 5%; affichage: Aucun;}. data_z_create_box_top_title {margin-left: 20px; Font-weight: Bold;}. shua {margin-top: 20px; float: gauche;}. Shua span {affiche: dans le bloc de large: float: gauche; 95%; float: à droite;}. data_state_buttonl_tips {Color: # 4Cae4c; Font-Weight: Bold; affichage: aucun;}JS:
$ (document) .ready (function (e) {var $ _div = $ ("<div class = '_ id_tips'> Confirmer pour supprimer cet ID de l'application? </v>") var $ _span1 = $ ("<span class = 'data_input_title'> App id: </pan> <span class = 'data_input_input'> <fant type = 'text' placeholder = ''> </span> ") $ (". iden_top ul li: eq (0) "). css ({" background-color ":" #fff "," border-bottom ":" 1px solide #ffff "}). li: eq (0) "). enfants (". iden_add_name "). addClass (" ll ") $ (". iden_top_button "). Cliquez sur (fonction () {$ ("# create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). html ("modifier l'application identifiant ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". data_input ul li div "). remove (); $ (". data_input ul li "). Input "). Val ($ (this) .siblings (". iden_add_name "). text ()) $ (". Create_z_create_box_center_quxiao "). Cliquez sur (fonction () ? {$ ("# create_z"). hide () $ (". data_z_create_box"). hide (300) $ (". ll"). text ($ (this) .parent (). ldren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). cliquez sur (fonction () {$ ("# create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) var a = 2; $ (". iden_add"). Cliquez (fonction () {var clis = $ (". $ ("<li> <p class = 'iden_add_name'> id d'application <span>" + a + "</span> </p> <span> </span> <v> </div> </li>"); $ (". iden_top ul"). #ffff "}). Enfants (" div "). addClass (" iden_top_dete "); $ _ li.children (" span "). addClass (" iden_top_button ") $ _ li.siblings (). #ccc "}). Enfants (" div "). RemoveClass (" iden_top_dete "); $ _ li.sibling (".IDEN_ADD_NAME"). AddClass ("ll"); $ _ li.siblings (). Enfants (". IDEN_ADD_NAME"). RemoveClass ("ll"); $ (". {$ (this) .parent ($ _ li) .addclass ("qq") $ ("# create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title" . ul li span "). retire (); $ (". data_input ul li "). append ($ _ div)}) $ (". create_z_create_box_center_quxiao "). cliquez (function () {$ (" # create_z "). hide () $ (". data_z_create_box "). Hide (300) $ _ div.. UL LI "). RemoveClass (" qq ")}) $ (". Create_Z_Create_Box_Center_Queding "). Cliquez sur (fonction () {$ (". QQ "). Supprime () $ (" # Create_Z "). Hide () $ (". Data_Z_Zreate_Box "). Hide (300) $ _ div.Remove () $ (". Li: Eq (0) "). CSS ({" Background-Color ":" #fff "," Border-Bottom ":" 1px solide #fff "}). Enfants (" Span "). AddClass (" iden_top_button ")}) $ (". {$ ("# create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). html ("modifier l'application identifiant ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". data_input ul li div "). remove (); $ (". data_input ul li "). Input "). Val ($ (this) .siblings (". iden_add_name "). text ()) $ (". Create_z_create_box_center_quxiao "). Cliquez sur (fonction () ? {$ ("# create_z"). hide () $ (". data_z_create_box"). hide (300) $ (". ll"). text ($ (this) .parent (). ldren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). cliquez sur (fonction () {$ ("# create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) clis ++; a ++;} $ (". iden_top ul li"). clique #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 "}). Enfants (" div "). RemoveClass (" iden_top_dete "); $ (this) .sibling Li: Eq (0) "). Enfants (" div "). SuppeClass (" iden_top_dete "); $ (this) .children (". iden_add_name "). addClass (" ll "); $ (this) .siblings (). enfants (". iden_add_name ").Ce qui précède est le code d'ajout de suppression de suppression et de modification de l'onglet basé sur HTML + CSS + JS qui vous a été présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!