基于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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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 缓冲的免费实现方法
2006/10/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php支付宝APP支付功能
2020/07/29 PHP
JavaScript中的私有成员
2006/09/18 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
详解Python中for循环是如何工作的
2017/06/30 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python热力图实现简单方法
2021/01/29 Python
揠苗助长教学反思
2014/02/04 职场文书
消防先进事迹材料
2014/02/10 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
谢师宴家长答谢词
2015/09/30 职场文书