基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼
先給大家展示下效果圖,如果大家感覺還不錯(cuò),請(qǐng)參考實(shí)現(xiàn)代碼哦!
HTML:
<div class="container iden_top"> <ul> <li> <p class='iden_add_name'>應(yīng)用標(biāo)識(shí)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">應(yīng)用標(biāo)識(shí):</span> <span class="data_input_input"><input type="text" placeholder="應(yīng)用標(biāo)識(shí)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'>確認(rèn)要?jiǎng)h除此應(yīng)用標(biāo)識(shí)嗎?</div>") var $_span1 = $("<span class='data_input_title'>應(yīng)用標(biāo)識(shí):</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("修改應(yīng)用標(biāo)識(shí)") $(".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'>應(yīng)用標(biāo)識(shí)<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("修改應(yīng)用標(biāo)識(shí)") $(".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實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
本篇文章介紹了,jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用。需要的朋友參考下2013-04-04Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說明介紹)
本篇文章是對(duì)Jquery中顯示和隱藏元素或設(shè)為只讀以及Ligerui的控件禁用實(shí)現(xiàn)代碼進(jìn)行了分析介紹,需要的朋友可以參考下2013-07-07jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。2010-12-12JQuery對(duì)表單元素的基本操作使用總結(jié)
這篇文章主要介紹了JQuery對(duì)表單元素的基本操作使用總結(jié),需要的朋友可以參考下2014-07-07擴(kuò)展Jquery插件處理mouseover時(shí)內(nèi)部有子元素時(shí)發(fā)生樣式閃爍
在我們對(duì)一個(gè)dom添加mouseover和mouseout時(shí),也就是jquery的hover事件,如果該dom有子元素,鼠標(biāo)移到子元素時(shí)會(huì)觸發(fā)mouseout事件,但往往實(shí)際情況我們希望在子元素上不觸發(fā)out事件2011-12-12jquery tools 系列 scrollable學(xué)習(xí)
今天繼續(xù)jquery tools六大功能之第三功能 scrollable的學(xué)習(xí)。一如既往,首先給出操作的html代碼 此html代碼修改自jquery tools官方網(wǎng)站demo代碼2009-09-09