اسمحوا لي أن أريكم العروض أولا. إذا كنت تشعر أنه جيد جدًا ، فيرجى الرجوع إلى رمز التنفيذ!
HTML:
<viv> <ul> <li> <p class = 'iden_add_name'> application id1 </p> <span> </span> <viv> </viv> </li> </ul> <span>+</span> </viv> <viv> <viv> <span> </span> <viv> x </viv> </viv> <viv> <!-<div> </viv>-> <viv> <ul> <li> <!-<span> معرف التطبيق: </span> <span> <إدخال type = "text" placehold = "app app id1 "> </span>-> </li> </ul> </viv> <viv> <butten> إلغاء </button> <button> حفظ </button> <button> تأكيد </button> </viv> </viv>
CSS:
.iden_top {width: 100 ٪ ؛ border-bottom: 1px solid #ccc ؛ الارتفاع: 37px ؛ خط الارتفاع: 35px ؛}. iden_top ul li {height: 37px ؛ ارتفاع الخط: 35 بكسل ؛ المؤشر: مؤشر ؛ العرض: Auto ؛ Padding: 0px 10px ؛ خلفية اللون: #EEE ؛ تعويم: اليسار ؛ الحدود الحدودية: 5px 5px 0px ؛ الحدود: 1px الصلبة #ccc ؛ الهامش-بوتوم: -1px ؛ . العرض: مضمّن الكتلة ؛ محاذاة النص: المركز ؛ الحجم: 25 بكسل ؛ العرض: 40 بكسل ؛ الارتفاع: 36px ؛ اللون: #2B98FC ؛ خط الرصيف: جريئة ؛ لون الخلفية: #EEE ؛ الحدود: 1px Solid #CCC ؛ الحدود-Radius: 5px 5px 0px 0px ؛}. iden_top_button {display: inline block ؛ width: 20px ؛ الارتفاع: 20 بكسل ؛ خلفية-صورة: url (../ img/xiug.png) ؛ خلفية تكرار: عدم التكرار ؛ حجم الخلفية: 100 ٪ ؛ الهامش: 7px 0px 0px 5px ؛ float: left ؛}. iden_top_dete {float: right ؛ width: 20px ؛ الارتفاع: 20 بكسل ؛ صورة الخلفية: url (../ img/close.png) ؛ تكرار الخلفية: عدم التكرار ؛ حجم الخلفية: 100 ٪ ؛ الهامش: 7px 0px 0px 5px ؛ float: right ؛}. iden_add_name {float: left ؛ } .data_z_create_box {display: none ؛ العرض: 600 بكسل ؛ MINIight: 200px ؛ خلفية اللون: #ffff ؛ الحدود: 1px الصلبة #CCC ؛ الحدود الحدودية: 5px ؛ الموقف: مطلق ؛ z-index: 44 ؛ الأعلى: 10 ٪ ؛ اليسار: 50 ٪ ؛ الهامش-اليسار: -300px ؛ مربع الشادو: 0px 5px 10px #666} .data_z_create_box_center_quxiao {background-color: #ea5d5b ؛ color: #ffff ؛ margin-Right: 10px ؛ العرض: Auto! مهم ؛ padding: 0px 10px ؛}. data_z_create_box_center_quxiao: hover {background-color: #d2322d ؛}. data_tips {padding: 10px ؛ العرض: 90 ٪ ؛ الهامش: 0px Auto ؛ اللون: #A94442 ؛ خلفية اللون: #f2dede ؛ الحدود: 1px الصلبة #ebccd1 ؛ الحدود-radius: 5px ؛}. data_input {height: auto ؛ padding: 0px 30px ؛}. Data_input ul li {height: 50px ؛ Line-Height: 50px ؛}. data_input_input إدخال {text-indent: 10px ؛ العرض: 70 ٪ ؛ الارتفاع: 40 بكسل ؛ رفع الخط: 40 بكسل ؛ الحدود الحدودية: 5px ؛ الحدود: 1px solid #ccc ؛}. data_input_tips {margin-left: 5 ٪ ؛ display: none ؛}. data_z_create_box_top_title {margin-left: 20px ؛ font-weight: bold ؛}. 95 ٪ تعويم: يمين ؛}. 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> id id: </span class =' data_input. النائب = ''> </span> ") $ (". iden_top ul li: eq (0) "). css ({" background-color ": LI: Eq (0) "). الأطفال (". iden_add_name "). addClass (" ll ") $ (". iden_top_button "). {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ ( المعرف ") $ (". إدخال "). val ($ (this) .siblings ( {$ ("#create_z"). Hide () $ (". data_z_create_box"). إخفاء (300) $ _ span1.remove ()}) $ (". {$ ("#create_z"). Hide () $ (". data_z_create_box"). إخفاء (300) $ (" ldren (). {$ ("#create_z"). hide () $ (". data_z_create_box"). إخفاء (300) $ _ span1.Remove ()}) var a = 2 ؛ $ ( class = 'iden_add_name'> معرف التطبيق <span> " + a +" </span> </p> <span> </span> <viv> </viv> </li>) ؛ $ ( #ffff "}) #ccc "}) (".iden_add_name"). addClass ("ll") ؛ $ _ li.siblings (). الأطفال ( {$ (this) .parent ($ _ li) .addClass ("qq") $ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ (". data_z_create_box_box_title" ) .html ("tip") $ (" ul li span "). remove () ؛ $ (". data_input ul li "). إلحاق ($ _ div)}) $ (". li "). removeClass (" qq ")}) $ (" li: eq (0) "). {$ ("#create_z"). show () $ (". data_z_create_box"). show (300) $ ( المعرف ") $ (". إدخال "). val ($ (this) .siblings ( {$ ("#create_z"). Hide () $ (". data_z_create_box"). إخفاء (300) $ _ span1.remove ()}) $ (". {$ ("#create_z"). Hide () $ (". data_z_create_box"). إخفاء (300) $ (" ldren (). {$ ("#create_z"). hide () $ (". data_z_create_box"). إخفاء (300) $ _ span1.remove ()}) clis ++ ؛ a ++ ؛} $ (". iden_top ul li"). #ffff "}). الأطفال (" div "). addClass (" iden_top_dete ") ؛ $ (هذا). #ccc "}) Li: Eq (0) ")ما سبق هو رمز إضافة حذف وتعديل التنقل في علامة التبويب استنادًا إلى HTML+CSS+JS المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!