Based on HTML+CSS+JS Implementation Add Delete modify tab navigation effect code _jquery

First to show you the effect of the picture, if you feel good, please refer to the implementation of the code Oh!

Html:

<div class= "Container iden_top" > <ul> <li> <p class= ' iden_add_name ' > Application identification 1</p> <span class= "Iden_top_button" ></span> <div class= "Iden_top_dete" ></div> </li> </ul> < Span class= "Iden_add" >+</span> </div> <div class= "Data_z_create_box" > <div class= "create_z_ Create_box_top "> <span class=" data_z_create_box_top_title "></span> <div class=" Create_z_create_ Box_top_close ">X</div> </div> <div class=" Create_z_create_box_center "> <!--<div class=" Data_tips "> </div>--> <div class=" Data_input "> <ul> <li> <!--<span class=" Data_ Input_title > Application identification:</span> <span class= "data_input_input" ><input type= "text" placeholder= "Application ID 1" ></span>--> </li> </ul> </div> </div> <div class= "Create_z_create_box_button" > <button class= "Create_z_create_box_center_quxiao" > Cancel </button> <button class= "Create_z_create_box_center_baocun" > Save </button> <button class= "Create_z_create_box_" Center_queding "> OK </button> </div> </div>

CSS:

. iden_top{width:100%;border-bottom:1px solid #ccc height:37px; line-height:35px; iden_top ul li{height:37px; line- height:35px; cursor:pointer;width:auto;padding:0px 10px; Background-color: #eee float:left;border-radius:5px 5px 0px 0px;border:1px solid #ccc margin-bottom: -1px; }. Iden_add{float:left;margin-top: -9px;cursor:pointer; display:inline-block;text-align:center;font-size:25px; width:40px; Height:36px;color: #2B98FC; Font-weight:bold; Background-color: #eee;
border:1px solid #ccc; border-radius:5px 5px 0px 0px;} . iden_top_button{display:inline-block;width:20px; height:20px background-image: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; height:20px background-image: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; width:600px; min-height:200px; Background-color: #fff; border:1px solid #ccc; border-radius:5px; position:absolute;z-index:44; Top:10%;left:50%;margin-left: -300px;box-shadow:0px 5px 10px #666}. data_z_create_box_center_quxiao{ Background-color: #ea5d5b; color: #fff; margin-right:10px;
width:auto!important;padding:0px 10px;} . Data_z_create_box_center_quxiao:hover{background-color: #d2322d; data_tips{padding:10px; width:90%; margin:0px Auto
Color: #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; width:70%; height:40px; line-height:40px; border-radius:5px;
border:1px solid #ccc;}
. data_input_tips{margin-left:5%;d isplay:none; data_z_create_box_top_title{margin-left:20px;font-weight:bold;} . shua{margin-top:20px;float:left; Shua span{display:inline-block;width:95%; float:right; data_state_buttonl_tiPs{color: #4CAE4C; font-weight:bold;display:none;} 

JS:

$ (document). Ready (function (e) {var $_div = $ ("<div class= ' _id_tips ' > Confirm that you want to delete this application ID?") </div> ") var $_span1 = $ (" <span class= ' data_input_title ' > Application identification: </span><span class= ' Data_input_ Input ' ><input type= ' text ' placeholder= ' ></span>) $ (". Iden_top ul li:eq (0)"). CSS ({"Background-color
": #fff", "Border-bottom": "1px solid #fff"}). Children (). Removeclass ("Iden_top_dete"); $ (". Iden_top ul li:eq (0)"). Children (". Iden_add_name"). AddClass ("ll") $ (". Iden_top_button"). Click (function () {$ ("# Create_z "). Show () $ (". Data_z_create_box "). Show (". Data_z_create_box_top_title "). HTML (" Modify Application ID ") $ (". Create_z
_create_box_center_baocun "). Show ();
$ (". Create_z_create_box_center_queding"). Hide ();
$ (". Data_input ul Li div"). Remove ();
$ (". Data_input ul li"). Append ($_span1) $ (". Data_input_input 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 (a) $ (". ll"). Text ($ (this). Parent (). siblings (). Children (). Find ("Input"). Val ()) $_span1.remove ()}) $ (". Create_z _create_box_top_close "). Click (function () {$ (" #create_z "). Hide () $ (". Data_z_create_box "). Hide (+) $_span1.remove (
)) var a = 2;  $ (". Iden_add"). Click (function () {var CLIs = $ (". Iden_top ul li"). length; if (CLIs <= 4) {var $_li = $ ("<li><p class= ' Iden_add_name ' > Application logo <span> "+ A +" </span></p><span></span><div></
Div></li> ");
$ (". Iden_top ul"). Append ($_li); $_li.css ({"Background-color": "#fff", "Border-bottom": "1px solid #fff"}). 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 () {$ (this). Parent ($_li). addclass ("QQ") $ ("#create_z"). Show () $ (". Data_z_create
_box "). Show ($) $ (". Data_z_create_box_top_title "). HTML (" hint ") $ (". Create_z_create_box_center_baocun "). Hide ();
$ (". Create_z_create_box_center_queding"). Show ();
$ (". Data_input 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 ($) $_div.remove () $ (". Iden_top ul li"). Removeclass ("QQ")}) $ (". Create_z_create
_box_center_queding "). Click (function () {$ (". QQ "). Remove () $ (" #create_z "). Hide () $ (". Data_z_create_box "). Hide (300) $_div.remove () $ (". Iden_top ul li:eq (0)"). CSS ({"Background-color": "#fff", "Border-bottom": "1px solid #fff"}). Children ("span"). AddClass ("Iden_top_button")}) $ (". Iden_top_button"). Click (function () {$ ("#create_z"). Show () $ (". Data_z_create_box"). Show ($) $ (". Data_z_create_box_top_title"). HTML ("Modify Application ID") $ (". Create_z_create_
Box_center_baocun "). Show ();
$ (". Create_z_create_box_center_queding"). Hide ();
$ (". Data_input ul Li div"). Remove ();
$ (". Data_input ul li"). Append ($_span1) $ (". Data_input_input 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 ($) (". ll "). Text ($ (this). Parent (). siblings (). Children (). Find (" Input "). Val ()) $_span1.remove ( }) $ (". Create_z_create_box_top_close"). Click (function () {$ (#create_z). Hide () $ (". Data_z_create_box"). Hide (
()) $_span1.remove ()}) clis++;
a++; $ (". Iden_top ul li"). Click (function () {$ (this). css ({"Background-color": "#fff", "Border-bottom": "1px solid #fff"}). C
Hildren ("div"). addclass ("Iden_top_dete"); $ (thIS). Children (' span '). addclass ("Iden_top_button") $ (this). Siblings (). css ({"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"). Removeclass ("ll"); })
})
})

The above is a small series to introduce the implementation of HTML+CSS+JS based on the deletion of the Change tab navigation effect code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!