效果如图所示，基于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. C#开发移动平台iOS、Android 与Windows

    1.Xamarin http://www.csdn.net/article/2014-02-28/2818585-Xamarin-CSDN-mobile-develop

  2. android4.0 FaceDetection笔记

    这几天研究了下andoid4.0.3的FaceDetection这里写一下大致的流程,方便日后查阅. 相关说明可以在这里找到: frameworks/base/docs/html/guide/topi ...

  3. 实时的.NET程序错误监控产品Exceptionless开源了

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实时的.NET程序错误监控产品Exceptionless开源了.

  4. ASP.NET多线程下使用HttpContext.Current为null解决方案

    多线程或者异步调用中如何访问HttpContext? 前面我还提到在APM模式下的异步完成回调时,访问HttpContext.Current也会返回null,那么此时该怎么办呢? 答案有二种:1. 在 ...

  5. Least Common Multiple

    地址:http://www.codewars.com/kata/5259acb16021e9d8a60010af/train/python 题目: Write a function that calc ...

  6. Hive sql 语法解读

    一. 创建表 在官方的wiki里,example是这种: Sql代码   CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name d ...

  7. IE无法打开internet网站已终止操作的解决的方法

    用IE内核浏览器的朋友,或许不经意间会碰到这样滴问题: 打开某个网页时,浏览器“嘣”跳出一个提示框“Internet Explorer无法打开Internet 站点...已终止操作”.而大多数情况下该 ...

  8. How to trace a java-program

    up vote17down votefavorite 8 As a sysadmin I sometimes face situations, where a program behaves abno ...

  9. python学习笔记--Django入门三 Django 与数据库的交互：数据建模

    把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...

  10. CXF整合Spring开发WebService

    刚开始学webservice时就听说了cxf,一直没有尝试过,这两天试了一下,还不错,总结如下: 要使用cxf当然是要先去apache下载cxf,下载完成之后,先要配置环境变量,有以下三步: 1.打开 ...