怎么给html导航加特效,基于HTML+CSS+JS实现增加删除修改tab导航特效代码

先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！

HTML：

应用标识1

Box">

Box_top">

Box_top_title">

Box_top_close">X

Box_center">

Box_button">

Box_center_quxiao">取消

Box_center_baocun">保存

Box_center_queding">确定

CSS：

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%;display: 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：

确认要删除此应用标识吗？")

var $_span1 = $("应用标识：")

$(".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(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();

$(".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(300)

$(".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(300)

$_span1.remove()

})

var a = 2;

$(".iden_add").click(function() {

var clis = $(".iden_top ul li").length;

if(clis <= 4) {

var $_li = $("

应用标识" + a + "");

$(".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(300)

$(".data_z_create_Box_top_title").html("提示")

$(".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(300)

$_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(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();

$(".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(300)

$(".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(300)

$_span1.remove()

})

clis++;

a++;

}

$(".iden_top ul li").click(function() {

$(this).css({

"background-color": "#fff","border-bottom": "1px solid #fff"

}).children("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");

})

})

})