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


Posted in Javascript onAugust 05, 2016

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

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

HTML:

<div class="container iden_top">
<ul>
<li>
<p class='iden_add_name'>应用标识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">应用标识:</span>
<span class="data_input_input"><input type="text" placeholder="应用标识1"></span>-->
</li>
</ul>
</div>
</div>
<div class="create_z_create_box_button">
<button class="create_z_create_box_center_quxiao">取消</button>
<button class="create_z_create_box_center_baocun">保存</button>
<button class="create_z_create_box_center_queding">确定</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%;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:

$(document).ready(function(e) {
var $_div = $("<div class='_id_tips'>确认要删除此应用标识吗?</div>")
var $_span1 = $("<span class='data_input_title'>应用标识:</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(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 = $("<li><p class='iden_add_name'>应用标识<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(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");
})
})
})

以上所述是小编给大家介绍的基于HTML+CSS+JS实现增加删除修改tab导航特效代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 #Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 #Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 #Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 #Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 #Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 #Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
js实现表格筛选功能
2017/01/18 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python黑魔法之编码转换
2016/01/25 Python
详解Python字典小结
2018/10/20 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
如何基于python实现归一化处理
2020/01/20 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
企业管理部经理岗位职责
2013/12/24 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
学校节水倡议书
2015/04/29 职场文书
企业投资意向书
2015/05/09 职场文书
一个都不能少观后感
2015/06/04 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL