效果如图所示，基于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. bzoj 2761 [JLOI2011]不重复数字（哈希表）

    2761: [JLOI2011]不重复数字 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3210  Solved: 1186[Submit][Sta ...

  2. hdoj 2401 Baskets of Gold Coins

    Baskets of Gold Coins Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  3. JAVA命名、注释规范

    一.命名规范 1. 项目名全部小写 2. 包名全部小写(除非部分是缩写) 3. 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. 如:public class MyFirstClas ...

  4. Ajax 整理总结（入门）

    Ajax 学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 ...

  5. Java SE Eclipse中引入第三方jar及class

    使用eclipse开发Java SE 总免不了需要引入第三方的jar或者calss文件.这里给大家说一下如何在eclipse中引入第三方jar或者calss文件. 让我们先了解一下eclipse项目中 ...

  6. asp.net mvc 两级分类联动方法示例

    前台视图代码 <%:Html.DropDownList("AwardClassMainID","请选择")%> <%:Html.DropDow ...

  7. 征服 Redis + Jedis + Spring （三）—— 列表操作【转】

    一开始以为Spring下操作哈希表,列表,真就是那么土.恍惚间发现“stringRedisTemplate.opsForList()”的强大,抓紧时间恶补下. 相关链接: 征服 Redis 征服 Re ...

  8. UIImage载入图片的几种方式及差别

    用UIImage载入图像的方法非常多.最经常使用的是几种:  1.使用imageNamed函数载入: <span style="font-size:14px;">[UI ...

  9. GDB反向调试 + 指令记录+函数历史记录

    http://blog.chinaunix.net/uid-26941022-id-3199961.html b.c void fun(int a, int b){ int c; c=a+b; } v ...

  10. 常用命令-eval简析

    www.2cto.com   1. 工作原理及用法   用法:eval command-line 原理:eval主要用在对参数的特殊处理上面的,一般的命令行,shell处理参数就只执行一遍,像转义和变 ...