效果如图所示，基于jq开发的，用原生可能会麻烦点。所以我没写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://qymys.tuiguang.net/js/jquery-1.7.2.min.js"></script>

<title>无标题文档</title>

<style>

    *{ margin:0; padding:0;}

    ul,li { list-style:none;}

    .cont {  margin:0 auto; border:solid 1px #ccc; padding:20px; background-color:#f4f4f4;}

    .title {  height:33px;}

    .title li { float:left; min-width:100px; text-align:center;  line-height:33px; position:relative; border:solid 1px #ccc; cursor:pointer; border-bottom:none; background-color:#666; color:#fff; margin-right:5px;}

    .title li i { width:12px; height:12px; text-align:center; line-height:12px; font-size:12px; border-radius:50%; position:absolute; right:5px; top:2px; font-style:normal; display:none; overflow:hidden; -webkit-transition:all 0.3s linear 0s;}

    .title li.check , .title li.add { background-color:#fff; color:#666;}

    .title li i:hover { -webkit-transform:rotate(180deg)}

    .title li:hover i { display:block;}

    .title li.add:hover i { display:none;}

    .cont_son { background-color:#fff; min-height:300px; border:solid 1px #ccc; padding:15px;}

    .cont_son_ul .disable { display:none;}

</style>

</head>

<body>

<div class="cont">

  <ul class="title">

        <li class="add">

            <p>+</p>

            <i>×</i>

        </li>

    </ul>

  <div class="cont_son">

      <ul class="cont_son_ul">

    </ul>

  </div>

</div>

<script>

$(document).ready(function(e) {

    var num = 0 ;

    $(".title li.add").on("click",function(){

            var clientWidth = parseInt($(".title").outerWidth());

            var liW =  $(".title li:first").outerWidth()+parseInt($(this).css("margin-right"));

            var maxNum =Math.floor( clientWidth/liW -1);

            if(num<maxNum){

            var newLi = document.createElement("li");

            newLi.innerHTML =" <p>导航一</p><i>×</i>";

            $(newLi).removeClass("check").attr("date-id",num);

            $(newLi).find("p").text("新导航").parent().insertBefore($(this));;

            var newCont = document.createElement("li");

            $(newCont).text("新内容"+num);

            $(newCont).addClass("disable").attr("date-id",num);

            $(".cont_son_ul").append($(newCont));

            num++;

            }

        });

    (function ($){

        $(".title").on("click","li:not(.add)",function(e){

        $(e.target).parent().addClass("check").siblings(".check").removeClass("check");

        $(".cont_son_ul li").eq($(e.target).parent().index()).removeClass("disable").siblings().addClass("disable");

        });

        $(".title").on("click","li i",function(e){

            var dateNum = parseInt( $(e.target).parent().attr("date-id"));

            if(dateNum!= "undefined"){

                $(e.target).parent().remove();

                $(".cont_son_ul li[date-id="+dateNum+"]").remove();

                num--;

                }

        });

    })(jQuery);

});

</script>

</body>

</html>

可编辑tab选项卡的更多相关文章

  1. C#如何编辑tab选项卡

    1 左侧的TabControl   2 如果要添加或删除选项卡个数,则定位到整个TabControl,然后编辑TabPages  

  2. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  3. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  4. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  5. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  6. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  7. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  8. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  9. 工作当中实际运用（1）——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

随机推荐

  1. vijosP1006 晴天小猪历险记之Hill

    vijosP1006 晴天小猪历险记之Hill 链接:https://vijos.org/p/1006 [思路] 图上DP. 这个题的递推顺序是关键.先从上一行得到最小值,然后从本行比较最小值,注意本 ...

  2. JavaScript高级程序设计26.pdf

    DOM操作技术 动态脚本 指得是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本,跟操作HTML元素一样,创建动态脚本也有2种方式:插入外部文件和直接插入JavaScript代码 var ...

  3. ubuntu12.04编译rtems doc目录

    我的rtem的版本是rtems-4.10.2:首先安装textinfo:sudo apt-get install texinfo 然后: cd rtems-4.10.2/doc../bootstrap ...

  4. hdoj 1068 Girls and Boys【匈牙利算法+最大独立集】

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. Maven source jar get

    Maven作为项目管理的包,同时也能方便的将source-jar下载的本地,省去了每次到网上分别下载的问题. Maven下载Jar包同时下载源文件和文档 示例,在maven生成的工程里面:mvn ec ...

  6. 课程助理For Windows（预览版，正方教务系统学生查分工具）

    其实盖子已经开发了一个功能更强大的版本,但是那个版本依然基于正方系统,也就是说只要正方系统跪了或者张院士在网站上做点手脚,这个小工具就会失效. 今天给大家的版本虽然功能及其简单.界面极端丑陋,但是通过 ...

  7. Find发帖水王哥

    Find发帖水王 传说贴吧有一大“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子总数的一半.如果你有一个当前论坛上所有帖子(包括回帖)的列表,其中帖子作者的 ...

  8. SQL语法集锦一：显示每个类别最新更新的数据

    本文转载http://www.cnblogs.com/lxblog/archive/2012/09/28/2707504.html (1)显示每个类别最新更新的数据 在项目中经常遇到求每个类别最新显示 ...

  9. SQL基础之 时间戳

    本文转载:http://www.cnblogs.com/liuhh/archive/2011/05/14/2046544.html 一直对时间戳这个概念比较模糊,相信有很多朋友也都会误认为:时间戳是一 ...

  10. [转]TCP和Http的区别!我都搞懂了,你就别迷糊了!

    相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别,希望通过自己的浅显理解能对初学者有所帮助. 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可 ...