먼저 렌더링을 보여 드리겠습니다. 꽤 좋다고 생각되면 구현 코드를 참조하십시오!
HTML :
<div> <ul> <li> <p class = 'iden_add_name'> 응용 프로그램 id1 </p> <span> </span> <div> </div> </li> </ul> <span>+</span> </div> <div> <div> <span> </span> <div> x </div> </div> <div> <!-<div> </div>-> <li> <li> <li> <li> <li> <li> <li> <li> application id : </span> <span> <입력 유형 = "text"placeholder = "app id1 "> </span>-> </li> </ul> </ul> </div> <div> <버튼> 취소 </button> <button> 저장 </button> <button> 확인 </button> </div> </div>
CSS :
.iden_top {너비 : 100%; 경계-바닥 : 1px solid #ccc; 높이 : 37px; Line-Height : 35px;}. iden_top ul li {높이 : 37px; 라인 높이 : 35px; 커서 : 포인터; 너비 : 자동; 패딩 : 0px 10px; 배경색 : #eee; float : 왼쪽; 왼쪽; 경계-라디우스 : 5px 5px 0px; 경계 : 1px solid #ccc; 마진-바닥 : -1px; } .iden_add {float : 왼쪽; 마진 -탑 : -9px; 커서 : 포인터; 디스플레이 : 인라인-블록; 텍스트-균형 : 중심; font-size : 25px; 너비 : 40px; 높이 : 36px; 색상 : #2B98FC; 글꼴 중량 : 대담한; 배경색 : #eee; 국경 : 1px solid #ccc; Border-Radius : 5px 5px 0px 0px;}. iden_top_button {디스플레이 : 인라인-블록; 너비 : 20px; 높이 : 20px; 배경-이미지 : URL (../ img/xiug.png); 배경 반복 : No-Repeat; 배경 크기 : 100%; 마진 : 7px 0px 0px 5px; float : 왼쪽;}. iden_top_dete {float : right; width : 20px; 높이 : 20px; 배경-이미지 : URL (../ img/close.png); Back } .data_z_create_box {display : 없음; 너비 : 600px; Min-Height : 200px; 배경색 : #ffff; 국경 : 1px Solid #CCC; Border-Radius : 5px; 위치 : 절대; z- 안수 : 44; 상단 : 10%; 왼쪽 : 50%; 마진-왼쪽 : -300px; Box-Shadow : 0px 5px 10px #666} .data_z_create_box_center_quxiao {background-color : #ea5d5b; 색상 : #ffff; 마진-오른쪽 : 10px; 너비 : 자동! 중요; 패딩 : 0px 10px;}. Data_Z__CREATE_BOX_CENTER_QUXIAO : HOVER {BACK 너비 : 90%; 마진 : 0px 자동; 색상 : #a94442; 배경색 : #f2dede; 테두리 : 1px solid #ebccd1; border-radius : 5px;}. data_input {height : auto; 패딩 : 0px 30px;}. data_input ul li {높이 : 50px; line-height : 50px;}. data_input_input input {text-indent : 10px; 너비 : 70%; 높이 : 40px; 라인 높이 : 40px; Border-Radius : 5px; 국경 : 1px solid #ccc;}. data_input_tips {margin-left : 5%; display : none;}. data_z_create_box_box_box_top_title {margin-left : 20px; font-weight : bold;}. shua {shua {shua {wid};}. float : right;}. data_state_buttonl_tips {color : #4cae4c; font-weight : bold; display : none;}JS :
$ (document). readay (function (e) {var $ _div = $ ( "<div class = '_ id_tips'>이 앱 ID를 삭제하도록 확인? </div>")) var $ _span1 = $ ( "<span class = 'data_input_title'> app id : </span> <span data_input_input '> <input type ='text ' 위장기 = ''> </span> ") $ (". iden_top ul li : eq (0) "). css ({"background-color ":"#fff ","border-bottom ":"1px solid #fff "}) li : eq (0) "). children (". iden_add_name "). addClass ("ll ") $ (". iden_top_button "). 클릭 (function () {$ ( "#create_z"). show () $ ( ". data_z_create_box"). show (300) $ ( ". data_z_create_box_top_title"). html ( "응용 프로그램 수정 식별자 ") $ (". create_z_create_box_center_center_boocun "). show (); $ (". create_z_create_box_box_box_center_queding "). hide (); $ (". data_input ul li div "). remain (); $ (". data_input ul li ") 입력 "). val ($ (this) .Siplings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). 클릭 (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 ( "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'> 응용 프로그램 id <span>" + a + "</span> </p> <span> </span> <div> </div> </li>"); $ ( ". iden_top ul"). #ffff "}). children ("div "). addClass ("iden_top_dete "); $ _ li.children ("span "). addClass ("iden_top_button ") $ _ li.siblings (). css ({"background-color ":"#eee ","Border-Bottom ":"1px solid #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 (). {$ (이) ) .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_box_center_quxiao "). click (function () {$ ("#create_z "). hide () $ (". data_z_create_box ") ul li "). removeClass ("qq ")}) $ (". create_z_create_box_center_queding "). 클릭 (function () {$ (". qq "). remove ("#create_z ") li : eq (0) "). css ({"background-color ":"#fff ","border-bottom ":"1px solid #fff "}. {$ ( "#create_z"). show () $ ( ". data_z_create_box"). show (300) $ ( ". data_z_create_box_top_title"). html ( "응용 프로그램 수정 식별자 ") $ (". create_z_create_box_center_center_boocun "). show (); $ (". create_z_create_box_box_box_center_queding "). hide (); $ (". data_input ul li div "). remain (); $ (". data_input ul li ") 입력 "). val ($ (this) .Siplings (". iden_add_name "). text ()) $ (". create_z_create_box_center_quxiao "). 클릭 (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 ( "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) #ffff "}). children ("div "). addClass ("iden_top_dete "); $ (this) .Children ("span "). addClass ("iden_top_button ") $ (this) .siblings ({"background-color ":"#eee ","Border-Bottom ":"1px solid #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 "))))))).위의 내용은 소개 된 HTML+CSS+JS를 기반으로 삭제 및 수정 탭 탐색 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!