Déjame mostrarte las representaciones primero. Si cree que es bastante bueno, ¡consulte el código de implementación!
HTML:
<Viv> <ul> <li> <p class = 'iden_add_name'> Aplicación ID1 </p> <span> </span> <div> </div> </li> </ul> <span>+</span> </div> <Viv> <viv> <span> </span> <div> x </div> </div> <div> <!-<div> </div>-> <div> <ul> <li> <!-<span> ID de aplicación: </span> <span> <input type = "text" placeholder = "app =" app = "app =" app " ID1 "> </span>-> </li> </ul> </div> <div> <botón> Cancelar </boton> <botte> guardar </boton> <botón> confirmar </botón> </div> </div>
CSS:
.iden_top {ancho: 100%;-bordes-bottom: 1px solid #ccc; altura: 37px; Línea-aguja: 35px;}. IDEN_TOP UL LI {altura: 37px; Línea de altura: 35px; cursor: puntero; ancho: auto; relleno: 0px 10px; Color de fondo: #EEE; Float: Izquierda; Border-Radius: 5px 5px 0px; Border: 1px Solid #CCC; Margen-Bottom: -1px; } .iden_add {float: izquierda; margin -top: -9px; cursor: pointer; Pantalla: bloque en línea; text-align: centro; tamaño de fuente: 25px; ancho: 40px; altura: 36px; color: #2b98fc; Font-Weight: Bold; Color de fondo: #EEE; Border: 1px Solid #CCC; Border-Radius: 5PX 5PX 0PX 0PX;}. IDEN_TOP_BUTTON {display: inline-block; ancho: 20px; Altura: 20px; background-image: url (../ img/xiug.png); background-repeat: no-repeat; en segundo plano: 100%; margen: 7px 0px 0px 5px; float: izquierda;}. IDEN_TOP_DETE {float: derecho; ancho: 20px; Altura: 20px; background-Image: URL (../ img/close.png); Background-Repeat: No-Repeat; Sidegrote-Size: 100%; Margen: 7px 0px 0px 5px; Float: Right;}. IDEN_ADD_NAME {float: izquierda; } .data_z_create_box {display: none; Ancho: 600px; Min-altura: 200px; Color de fondo: #ffff; borde: 1px sólido #ccc; Border-Radius: 5px; posición: absoluto; índice z: 44; arriba: 10%; izquierda: 50%; margen-izquierda: -300px; box-shadow: 0px 5px 10px #666} .data_z_create_box_center_quxiao {Color de fondo: #ea5d5b; color: #ffff; margen-right: 10px; Ancho: AUTO! IMPORTANTE; RELLADO: 0PX 10PX;}. Data_z_create_box_center_quxiao: Hover {Background-Color: #D2322d;}. Data_tips {Padding: 10px; Ancho: 90%; Margen: 0px Auto; Color: #A94442; Color de fondo: #f2dede; borde: 1px sólido #ebccd1; border-radio: 5px;}. data_input {altura: auto; relleno: 0px 30px;}. data_input ul li {altura: 50px; Line-Height: 50px;}. data_input_input input {text-indent: 10px; Ancho: 70%; Altura: 40px; Línea de altura: 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; float: izquierda;}. shua spant spant: visualphy: inline: inline; flotante: derecho;}. data_state_buttonl_tips {color: #4cae4c; font-weight: bold; display: none;}JS:
$ (documento) .Ready (function (e) {var $ _div = $ ("<div class = '' _ id_tips '> Confirmar para eliminar esta identificación de la aplicación? </div>") var $ _span1 = $ ("<span class =' data_input_title '> ID de aplicación: </span> <span class =' data_input_input '> <input type =' text '' ' PlaceHolder = ''> </span> ") $ (". IDEN_TOP UL LI: EQ (0) "). CSS ({" Color de fondo ":" #fff "," Border-Bottom ":" 1px Solid #FFFF "}). Children (). RemoVECLass (" IDEN_TOP_DETE "); $ (". IDEN_TOP li: eq (0) "). Children (". IDEN_ADD_NAME "). AddClass (" ll ") $ (". IDEN_TOP_BUTTON "). Click (function () {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). Html ("Modifique la aplicación identificador ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". data_input ul li div "). remove (); $ (". data_input ul "). append ($ _ span1) $ (". ". entrada "). Val ($ (this) .siblings (". IDEN_ADD_NAME "). Text ()) $ (". Create_Z_Create_box_center_quxiao "). Click (function () {$ ("#create_z"). Hide () $ (". Data_Z_Create_box"). Hide (300) $ _ SPAN1.remove ()}) $ (". Create_Z_Create_box_center_Baocun"). Click (function () {$ ("#create_z"). Hide () $ (". Data_Z_Create_box"). Hide (300) $ (". Ll"). Text ($ (this) .Parent (). Siblings (). Chi lDren (). Find ("Entrada"). 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; $ (". IDEN_ADD"). Click (function () {var clis = $ (". IDEN_TOP ul Li"). $ ("<li> <p class = 'iden_add_name'> ID de aplicación <Span>" + a + "</span> </p> <span> </span> <div> </div> </li>"); $ (". IDEN_TOP UL"). Append ($ _ li); $ _ li.csss ({"Coror de fondo": "#fff", "Border-1:" Border ":" 1 1 1: "1 1 1 #ffff "}). Children (" Div "). AddClass (" IDEN_TOP_DETE "); $ _ li.children (" span "). addClass (" IDEN_TOP_BUTTON ") $ _ li.siblings (). CSS ({" Color de fondo ":" #EEEE "," Borderotomio ":" 1px sólido sólido " #ccc "}). Children (" Div "). RemoveClass (" IDEN_TOP_DETE "); $ _ li.siblings (). Children (" Span "). RemoveClass (" IDEN_TOP_BUTTON "); $ _ Li.children (".iden_add_name"). addClass ("ll"); $ _ li.siblings (). Children (". IDEN_ADD_NAME"). RemoveClass ("ll"); $ (". IDEN_TOP_DETE"). Click (function () {$ (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_Inputputput. ul li span "). remove (); $ (". data_input ul li "). append ($ _ div)}) $ (". create_z_create_box_center_quxiao "). click (function () {$ ("#create_z "). hide () $ (". data_z_create_box "). hide (300) $ _ div.remove (). ul li "). RemoveClass (" Qq ")}) $ (". Create_Z_Create_box_center_queding "). Click (function () {$ (". Qq "). Remove () $ ("#create_z "). li: eq (0) "). CSS ({" Color de fondo ":" #fff "," Border-Bottom ":" 1px Solid #FFF "}). Children (" Span "). AddClass (" IDEN_TOP_BUTTON ")}) $ (". IDEN_TOP_BUTTON "). Click () {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_top_title"). Html ("Modifique la aplicación identificador ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". data_input ul li div "). remove (); $ (". data_input ul "). append ($ _ span1) $ (". ". entrada "). Val ($ (this) .siblings (". IDEN_ADD_NAME "). Text ()) $ (". Create_Z_Create_box_center_quxiao "). Click (function () {$ ("#create_z"). Hide () $ (". Data_Z_Create_box"). Hide (300) $ _ SPAN1.remove ()}) $ (". Create_Z_Create_box_center_Baocun"). Click (function () {$ ("#create_z"). Hide () $ (". Data_Z_Create_box"). Hide (300) $ (". Ll"). Text ($ (this) .Parent (). Siblings (). Chi lDren (). Find ("Entrada"). 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").click(function() {$(this).css({"background-color": "#fff","border-bottom": "1px solid #ffff "}). Children (" Div "). AddClass (" IDEN_TOP_DETE "); $ (this) .Children (" span "). addClass (" IDEN_TOP_BUTTON ") $ (this) .siblings (). CSS ({" Color de fondo ":" #EEEE "," Borderotomio ":" 1px sólido sólido sólido #ccc "}). Children (" Div "). RemoveClass (" IDEN_TOP_DETE "); $ (this) .siblings (). Children (" Span "). RemoveClass (" IDEN_TOP_BUTTON "); $ (". IDEN_TOP UL li: eq (0) "). Children (" div "). RemoveClass (" IDEN_TOP_DETE "); $ (this) .Children (". IDEN_ADD_NAME "). addClass (" ll "); $ (this) .siblings (). Children (". IDEN_ADD_NAME ").Lo anterior es el código de agregar y modificar la navegación de pestañas basada en HTML+CSS+JS introducido a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!