Lassen Sie mich Ihnen zuerst die Renderings zeigen. Wenn Sie das Gefühl haben, dass es ziemlich gut ist, wenden Sie sich bitte an den Implementierungscode!
HTML:
<div> <ul> <li> <p class = 'iden_add_name'> Anwendungs -ID1 </p> <span> </span> <div> </div> </li> </ul> <span>+</span> </div> </div> <div> <div> <span> </span> <div> x </div> </div> <div> <!-<div> </div>-> <ul> <li> <!-<span> Anwendungs-ID: </span> <span> <Eingabe type = "text" placeholder = "App ID1 "> </span>-> </li> </ul> </div> <div> <taste> Abbrechen </button> <taste> speichern </button> <tasten> bestätigen </button> </div> </div>
CSS:
.IDEN_TOP {Breite: 100%; Border-Bottom: 1PX Solid #CCC; Höhe: 37px; Zeilenhöhe: 35px;}. iden_top ul li {Höhe: 37px; Zeilenhöhe: 35px; Cursor: Zeiger; Breite: Auto; Padding: 0px 10px; Hintergrundfarbe: #eee; float: links; Border-Radius: 5px 5px 0px; Grenze: 1PX Solid #CCC; Rand-Bottom: -1px; } .iden_add {float: links; margin -top: -9px; cursor: pointer; Anzeige: Inline-Block; Text-Align: Mitte; Schriftgröße: 25px; Breite: 40px; Höhe: 36px; Farbe: #2B98FC; Schriftgewicht: fett; Hintergrundfarbe: #eee; Grenze: 1PX Solid #ccc; Border-Radius: 5px 5px 0px 0px;}. iden_top_button {display: inline-block; width: 20px; Höhe: 20px; Hintergrund-Image: URL (../ img/xiug.png); Hintergrund-Repeat: No-Repeat; Hintergrundgröße: 100%; Margin: 7px 0px 0px 5px; Float: links;}. iden_top_dete {float: rechts; width: 20px; Höhe: 20px; Hintergrund-Image: URL (../ img/close.png); Hintergrundrepeat: No-Repeat; Hintergrundgröße: 100%; Margin: 7px 0px 0px 5px; Float: rechts;}. ide_add_name {float: links; } .data_z_create_box {display: keine; Breite: 600px; Min-Höhe: 200px; Hintergrundfarbe: #ffff; Grenze: 1PX Solid #CCC; Border-Radius: 5px; Position: absolut; Z-Index: 44; Oben: 10%; links: 50%; Margin-Links: -300px; Box-Shadow: 0px 5px 10px #666} .data_z_create_box_center_quxiao {Hintergrund-Color: #EA5D5B; Farbe: #ffff; margin-right: 10px; Breite: Auto! Wichtig; Padding: 0px 10px;}. data_z_create_box_center_quxiao: Hover {Hintergrund-Color: #D2322D;}. Data_tips {Padding: 10px; Breite: 90%; Rand: 0px Auto; Farbe: #A94442; Hintergrundfarbe: #f2dede; Rand: 1px solide #ebccd1; Border-Radius: 5px;}. Data_input {Höhe: auto; padding: 0px 30px;}. Data_input ul li {Höhe: 50px; Zeilenhöhe: 50px;}. Data_input_input Input {textindent: 10px; Breite: 70%; Höhe: 40px; Zeilenhöhe: 40px; Border-Radius: 5px; Rand: 1px solid #ccc;}. data_input_tips {margin-linft: 5%; Anzeige: Keine;}. data_z_create_box_top_title {margin-links: 20px; font-weight: BOLD;}. Shua {margin-top: 20px; float: links;}.}.}.}. float: rechts;}. data_state_buttonl_tips {color: #4cae4c; Schriftgewicht: BOLD; Anzeige: Keine;}JS:
$ (Dokument) .Ready (Funktion (e) {var $ _div = $ ("<div class = '_ id_tips'> Bestätigen Sie, diese App -ID zu löschen? placeholder = ''> </span> ") $ (". ide_top ul li: eq (0) "). li: EQ (0) "). Kinder (". iden_add_name "). {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). html ("die Anwendung ändern Identifier ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); input "). val ($ (this) .sillings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). click (function () oder {$ ("#create_z"). hide () $ (". data_z_create_box"). Hide (300) $ (". LL"). Text ($ (this) .Parent (). Siblings (). Chi lDren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). click (function () {$ ("#create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) var a = 2; $ ("<li> <p class = 'iden_add_name'> Anwendungs-ID <span>" + a + "</span> </p> <span> </span> <div> </div> </li>"); $ (". iden_top ul"). Append ($ _ li); #ffff "}). Kinder (" div "). AddClass (" iden_top_dete "); #ccc "}). Kinder (" div "). removeclass (" iden_top_dete "); (".IDEN_ADD_NAME"). addClass ("ll"); {$ (this) .Parent ($ _ li) .AddClass ("qq") $ ("#create_z"). show () $ (". data_z_create_box"). Show (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 "). click (function () {$ ("#create_z "). hide (). ul li "). li: eq (0) "). {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). html ("die Anwendung ändern Identifier ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); input "). val ($ (this) .sillings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). click (function () oder {$ ("#create_z"). hide () $ (". data_z_create_box"). Hide (300) $ (". LL"). Text ($ (this) .Parent (). Siblings (). Chi lDren (). find ("input"). val ()) $ _ span1.remove ()})}) $ (". create_z_create_box_top_close"). click (function () {$ ("#create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) clis ++; a ++;} $ (". iden_top ul li"). klicken (function () {$ (this). #ffff "}). Kinder (" div "). AddClass (" iden_top_dete "); $ (this) .Children (" span "). #ccc "}). Kinder (" div "). removeclass (" iden_top_dete "); li: EQ (0) "). Kinder (" div "). removeclass (" iden_top_dete ");Das obige ist der Code des Hinzufügens von Löschen und Änderungen der Registerkartennavigation basierend auf HTML+CSS+JS, die Ihnen vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!