效果如图所示，基于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. openstack kvm 虚拟机磁盘差异衍生

    1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件    /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...

  2. Duff and Meat - CF 588A

    题目大意:有一个人他有每天需要吃ai千克肉,并且当天肉的价格是pi,问N天后他至少需要花费多少钱买肉. 分析:注意一下,他是可以提前买好肉放着的. 代码如下: #include<iostream ...

  3. JavaScript实现遮罩层

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 使用GridView自带分页的代码

    关于GridView分页页码的讨论 在GridView中实现分页的效果方法非常easy,仅仅须要在"GridView任务"对话框中进行设置就能够了.在"GridView任 ...

  5. MYSQL 索引页 结构图

    create table t( a ) not ) default null,primary key(a)); mysql> select * from t; +----+------+ | a ...

  6. 【转】学习Flex ActionScript 3.0 强烈推荐电子书

    学习Flex ActionScript 3.0 强烈推荐电子书 AdvancED ActionScript 3.0 Animation(<Make things  move>姐妹篇,强烈推 ...

  7. ASP.NET Web API（一）：使用初探，GET和POST数据

    概述 REST(Representational State Transfer表述性状态转移)而产生的REST API的讨论越来越多,微软在ASP.NET中也添加了Web API的功能 项目建立 在安 ...

  8. WTL 自绘 进度条Progressbar

    WTL 绘制的进度条,逻辑清晰明了,代码函数清晰易懂:基本思路就是 首先绘制 进度条背景图,然后根据动态进度不断重绘前景进度条,绘制操作在OnPaint函数里画.该类可以直接用于项目中. 使用示例: ...

  9. FAQs: 我们可以在那里来为我的没有提升管理权限的应用程序存储用户数据？

    如果你正在写一个不需要管理员权限的应用程序,如写一个业务线应用(Line of Business,LOB),用户应用程序如游戏,你总是要把应用程序的数据写到一个标准用可以访问的目录.下面列出一些所推荐 ...

  10. Cracking the coding interview-String

    关于字符串 问题描述:一般这类程序设计的题目较简单,通过设计字符串的反转,寻找子串,以及字符串的拼接.删除操作等问题. 问题 实现一个算法来判断一个字符串中的字符是否唯一(即没有重复)? 设计算法并写 ...