效果如图所示，基于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. Semi-definite programming优化工具

    半正定优化工具(SDPLR) SDPLR 是一个求解大规模半正定规划问题的C语言包.具体使用方法参见: http://dollar.biz.uiowa.edu/~sburer/pmwiki/pmwik ...

  2. UVa 10054 The Necklace BFS+建模欧拉回路

    算法指南 主要就是建立欧拉回路 #include <stdio.h> #include <string.h> #include <iostream> #includ ...

  3. HW4.26

    public class Solution { public static void main(String[] args) { double sum; double item; for(int i ...

  4. 【Hibernate】--实体状体与主键生成策略

    一.Hibernate三种状态 (1).瞬时状态(只存在Hibernate容器中,数据库中没有与之对应的记录) A.通过new实例化的实体,在没有执行save方法时. B.持久状态调用delete方法 ...

  5. hdu1698(线段树的区间替换)

    HDU1698 #include <bits/stdc++.h> using namespace std; #define Maxn 1001000*4 struct Node{ int ...

  6. SQL 主键和外键约束

    SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...

  7. hadoop ssh无密码登陆

    VM DHCP蛋疼了,这次整个static... scp

  8. [Javascript] Linting JavaScript with ESLint

    ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and othe ...

  9. Swift开发：NSLayoutConstraint纯代码实现自动布局－初级篇

    要求 宽高200的view,通过代码,使得view在距离父控件的右下角20边距处 /* 约束的设置,控件内部约束由自己添加,比如宽高,如果是与其他的 控件约束那么有父控件添加 *创建约束 NSLayo ...

  10. TabHost 两种使用方法 直接让一个Activity 继承TabActivity 和 利用findViwById()方法取得TagHost组件

    第一种,TabActivity 解决方案 下面建立的布局文件,它包含多个标签的显示组件 <?xml version="1.0" encoding="utf-8&qu ...