基于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 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript实现两个数组的交集
Mar 25 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中对用户身份认证实现两种方法
2011/06/04 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php MessagePack介绍
2013/10/06 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
移动节点的jquery代码
2014/01/13 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python如何写出表白程序
2020/06/01 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
钳工实习自我鉴定
2013/09/19 职场文书
就业自荐信
2013/12/04 职场文书
职业规划书如何设计?
2014/01/09 职场文书
小学教师寄语大全
2014/04/03 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
家长给学校的建议书
2014/05/15 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python基础详解之邮件处理
2021/04/28 Python
golang 语言中错误处理机制
2021/08/30 Golang
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
详解PyTorch模型保存与加载
2022/04/28 Python