Позвольте мне сначала показать вам визуализации. Если вы чувствуете, что это довольно хорошо, пожалуйста, обратитесь к коду реализации!
HTML:
<div> <ul> <li> <p class = 'iden_add_name'> идентификатор приложения1 </p> <pan> </span> <div> </div> </li> </ul> <pan>+</span> </div> <div> <div> <pan> </span> <div> x </div> </div> <div> <!-<div> </div>-> <div> <ul> <li> <!-<pan> идентификатор приложения: </span> <pran> <input = "text" Placeholder = " Id1 "> </span>-> </li> </ul> </div> <div> <tutry> Cancel </button> <tutry> Сохранить </button> <tutnue> Подтверждение </button> </div> </div>
CSS:
.iden_top {ширина: 100%; граница-ботмот: 1px solid #ccc; высота: 37px; Линия-высота: 35px;}. Iden_top ul li {высота: 37px; высота линии: 35px; курсор: указатель; ширина: авто; накладка: 0px 10px; Фоно-цвета: #EEE; float: слева; граница-радиус: 5px 5px 0px; граница: 1px solid #ccc; маржиновый пакет: -1px; } .iden_add {float: left; margin -top: -9px; cursor: pointer; дисплей: inline-block; текстовой алюна: центр; размер шрифта: 25px; ширина: 40px; высота: 36px; цвет: #2b98fc; шрифт-вес: жирный шрифт; фоновый цвет: #EEE; Граница: 1px solid #ccc; граница-радий: 5px 5px 0px 0px;}. Iden_top_button {Display: inline Block; ширина: 20px; Высота: 20px; Facon-Image: url (../ img/xiug.png); fachar-repeat: no-repeat; фоновый размер: 100%; маржа: 7px 0px 0px 5px; float:}.}. Iden_top_dete {float: right; ширина: 20px; Высота: 20px; Фоно-изображение: url (../ img/close.png); founal-repeat: no-repeat; фоновый размер: 100%; маржа: 7px 0px 0px 5px; float: right;}. iden_add_name {float: left; } .data_z_create_box {display: none; Ширина: 600px; Мин-высота: 200px; фоновый цвет: #ffff; Граница: 1PX SOLID #CCC; граница радий: 5px; позиция: абсолют; z-Index: 44; Верх: 10%; слева: 50%; Margin-left: -300px; Box-Shadow: 0px 5px 10px #666} .data_z_create_box_center_quxiao {фоновый цвет: #ea5d5b; color: #ffff; Margin-Right: 10px; Ширина: Авто! Ширина: 90%; Полевая: 0PX Auto; Цвет: #a94442; фоновый цвет: #f2dede; граница: 1px solid #ebccd1; border-radius: 5px;}. Data_input {height: Auto; Padding: 0px 30px;}. Data_input ul li {высота: 50px; Line-Height: 50px;}. data_input_input input {text-indent: 10px; Ширина: 70%; Высота: 40px; высота линии: 40px; граница радий: 5px; Border: 1px solid #ccc;}. data_input_tips {margin-left: 5%; дисплей: none;}. Data_z_create_box_top_title {margin-left: 20px; font-weight: bold;}. Shua {margin-top: 20px; float:}}. Shua spanlock {inlock willock; float: right;}. Data_state_buttonl_tips {color: #4cae4c; font-weight: bold; display: none;}JS:
$ (document) .ready (function (e) {var $ _div = $ ("<div class = '_ id_tips'> подтвердить, чтобы удалить это идентификатор этого приложения? </div>") var $ _span1 = $ ("<span class = 'data_input_title'> app: </span> <span class = 'data_input'> input 'ytele placeholder = ''> </span> ") $ (".. Iden_top ul li: eq (0) "). CSS ({" фоновый цвет ":" #fff "," border-bottom ":" 1px solid #ffff "}). Дети (). removeClass (" iden_top_dete ");". 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 ("изменить приложение Идентификатор ") $ (". create_z_create_box_center_baocun "). Show (); $ (". Create_z_create_box_center_queding "). Hide (); $ (". Data_input UL Li Div "). remove (); $ (". input "). 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) $ (" ldren (). Найти ("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; $ (". iden_add"). Click (function () {var clis = $ (". Iden_top ul li") $ ("<li> <p class = 'iden_add_name'> идентификатор приложения <pran>" + a + "</span> </p> <pan> </span> <div> </div> </li>"); $ (". Iden_top ul"). Приложение ($ _ li); $ _csssssss ({"founallop": "#fff": "#fff": "#fff": "#fff": "#fff": "#fff": "#fff": "#fff": "#fff": "#fff": ". #ffff "}). Дети (" div "). addClass (" iden_top_dete "); $ _ li.children (" span "). addclass (" iden_top_button ") $ _ li.siblings (). #CCC "}). Дети (" div "). removeClass (" iden_top_dete "); $ _ li.siblings (). Дети (" span "). removeClass (" iden_top_button "); $ _ li.children (".iden_add_name"). addclass ("ll"); $ _ li.siblings (). childres (". IDEN_ADD_NAME"). removeClass ("ll"); $ (". IDEN_TOP_DETE"). {$ (this) .parent ($ _ li) .AdClass ("qq") $ ("#create_z"). Show () $ (".. Data_z_create_box"). Show (300) $ (". Data_z_create_box_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 "). Приложение ($ _ div)}) $ (". Create_z_create_box_center_quxiao "). Click (function () {$ ("#create_z "). Hide () $ (". Data_z_cree_box '). ul li "). removeClass (" qq ")}) $ (". Create_z_create_box_center_queding "). Click (function () {$ (". QQ "). remove () $ ("#create_z "). Hide () $ (". Data_z_create_box "). Hide (300) $ _ div.remoe () $ $ $ $. li: eq (0) "). CSS ({" фоновое цвета ":" #fff "," border-bottom ":" 1px solid #fff "}). Дети (" span "). addClass (" iden_top_button ")}) $ (". Iden_top_button "). {$ ("#create_z"). Show () $ (". Data_z_create_box"). Show (300) $ (". Data_z_create_box_top_title"). html ("изменить приложение Идентификатор ") $ (". create_z_create_box_center_baocun "). Show (); $ (". Create_z_create_box_center_queding "). Hide (); $ (". Data_input UL Li Div "). remove (); $ (". input "). 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) $ (" ldren (). Найти ("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"). Click (function () {$ (this) .cssssssssssssss ({{"founal-color": "#fkff": "#fff": "#fff": "#fff": ". #ffff "}). Дети (" div "). addClass (" iden_top_dete "); $ (this) .children (" span "). addclass (" iden_top_button ") $ (this) .siblings (). #CCC "}). Дети (" div "). removeClass (" iden_top_dete "); $ (this) .siblings (). дети (" 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 (). Дети (". Iden_Add_Name ").).)Выше приведено код добавления удаления и изменения навигации вкладок на основе HTML+CSS+JS, представленного вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!