最初にレンダリングをお見せしましょう。かなり良いと感じたら、実装コードを参照してください！
HTML：
<div> <ul> <li> <p class = 'iden_add_name'> application id1 </p> <span> </span> <div> </div> </li> </ul> <span>+</span> </div> <div> <div> <span> </span> <div> x </div> </div> <div> <！ id1 "> </span> - > </li> </ul> </div> <div> <button> cancel </button> <butth> save </button> <butth>確認</button> </div> </div>
CSS：
.iden_top {width：100％; border-bottom：1px solid #ccc; height：37px; Line-Height：35px;}。iden_top ul li {height：37px;ラインハイト：35px;カーソル：ポインター;幅：auto; padding：0px 10px;バックグラウンドカラー：#eee; float：left; border-radius：5px 5px 0px; border：1px solid #ccc; margin-bottom：-1px; } .iden_add {float：left; margin -top：-9px; cursor：pointer;ディスプレイ：インラインブロック;テキストアリグイン：センター; font-size：25px; width：40px; height：36px; color：＃2b98fc; font-weight：bold;バックグラウンドカラー：#eee;境界：1px Solid #ccc; Border-radius：5px 5px 0px 0px;}。iden_top_button {display：inline-block; width：20px;高さ：20px;バックグラウンドイメージ：url（../ img/xiug.png）; background-repeat：no-repeat; background-size：100％; margin：7px 0px 0px 5px; float：left;}。iden_top_dete {float：right; width：20px;高さ：20px;バックグラウンドイメージ：url（../ img/close.png）; background-repeat：no-repeat; background-size：100％; margin：7px 0px 0px 5px; float：right;}。iden_add_name {float：left; } .data_z_create_box {display：none;幅：600px; Min-Height：200px;バックグラウンドカラー：#ffff;ボーダー：1pxソリッド#ccc;ボーダーラジウス：5px;位置：絶対; z-index：44;トップ：10％;左：50％;マージン左：-300px; box-shadow：0px 5px 10px＃666} .data_z_create_box_center_quxiao {background-color：＃ea5d5b; color：#ffff; margin-right：10px;幅：auto！fality; padding：0px 10px;}幅：90％;マージン：0px auto;色：＃a94442; background-color：＃f2dede; border：1px solid＃ebccd1; border-radius：5px;}。data_input {height：auto; padding：0px 30px;}。data_input ul li {height：50px; line-height：50px;}。data_input_input input {text-indent：10px;幅：70％;高さ：40px; Line-Height：40px;ボーダーラジウス：5px;境界：1px Solid #ccc;}。data_input_tips {marve-left：5％; display：none;} float：右;}JS：
$（document）.ready（function（e）{var $ _div = $（ "<div class = '_ id_tips'>このアプリIDを削除することを確認します。 PlaceHolder = ''> </span> "）$（" li：eq（0） "）。children（"。iden_add_name "）。addclass（" ll "）$（" {$（ "＃create_z"）。show（）$（ "。data_z_create_box"）識別子 "）$（"。create_z_create_box_center_baocun "）入力 "）。val（$（this）.siblings（"。iden_add_name "） {$（ "＃create_z"）。非表示（）$（ "。data_z_create_box"） {$（ "＃create_z"）。非表示（）$（ "。data_z_create_box"） ldren（）。find（ "input"）。val（））$ _ span1.remove（）}）}）$（ "。create_z_create_box_top_close"）。 {$（ "＃create_z"）。非表示（）$（ " class = 'iden_add_name'> application id <span> " + a +" </span> </p> <span> </span> <div> </div> </li> "）; $（"。iden_top ul "）。 #ffff "}）。children（" div "） #ccc "}）。子供（" div "） （ ".iden_add_name"）。addclass（ "ll"）; $ _ li.siblings（）。 {$（this）.parent（$ _ li）.addclass（ "qq"）$（ "＃create_z"）。show（）$（ "。data_z_create_box"） ）.html（ "tip"）$（ "。create_z_create_box_center_baocun"） ul li span "）。remove（）; $（"。data_input ul li "） li "）。removeclass（" qq ""）}）$（ "。create_z_create_box_center_queding"） li：eq（0） "）。css（{" background-color "：" #fff "、" border-bottom "：" 1px solid #fff "}）。子供（" span "）。 {$（ "＃create_z"）。show（）$（ "。data_z_create_box"）識別子 "）$（"。create_z_create_box_center_baocun "）入力 "）。val（$（this）.siblings（"。iden_add_name "） {$（ "＃create_z"）。非表示（）$（ "。data_z_create_box"） {$（ "＃create_z"）。非表示（）$（ "。data_z_create_box"） ldren（）。find（ "input"）。val（））$ _ span1.remove（）}）}）$（ "。create_z_create_box_top_close"）。 {$（ "＃create_z"）。非表示（）$（ " #ffff "}）。children（" div "） #ccc "}）。子供（" div "） li：eq（0） "）。子供（" div "）。removeclass（" iden_top_dete "）; $（this）。上記は、紹介されたHTML+CSS+JSに基づいて、削除および変更タブナビゲーションを追加するコードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！