1，自定义属性的方法实现----TAB菜单操作

cursor:pointer; 鼠标的小手

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display:none;

        }

        .menu{

            height:38px;

            background-color:#eeeeee;

            line-height:38px;

        }

        .active{

            background-color:brown;

        }

        .menu .menu-item{

            float:left;

            border-right:1px solid red;

            padding:0 5px;

            cursor:pointer;

        }

        .content{

            min-height:100px;

            border:1px solid black;

        }

    </style>

</head>

<body>

    <div style="width:700px;margin:0 auto;">

        <div class="menu">

            <div class="menu-item active" a="1">菜单一</div>

            <div class="menu-item" a="2">菜单二</div>

            <div class="menu-item" a="3">菜单三</div>

        </div>

        <div class="content">

            <div b="1">内容一</div>

            <div class="hide" b="2">内容二</div>

            <div class="hide" b="3">内容三</div>

        </div>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('.menu-item').click(function(){

            $(this).addClass('active').siblings().removeClass('active');

            var target=$(this).attr('a');

            $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');

        });

    </script>

</body>

</html>

运行结果：

2，索引的方法实现----TAB菜单操作

index：获取索引位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display:none;

        }

        .menu{

            height:38px;

            background-color:#eeeeee;

            line-height:38px;

        }

        .active{

            background-color:brown;

        }

        .menu .menu-item{

            float:left;

            border-right:1px solid red;

            padding:0 5px;

            cursor:pointer;

        }

        .content{

            min-height:100px;

            border:1px solid black;

        }

    </style>

</head>

<body>

    <div style="width:700px;margin:0 auto;">

        <div class="menu">

            <div class="menu-item active">菜单一</div>

            <div class="menu-item">菜单二</div>

            <div class="menu-item">菜单三</div>

        </div>

        <div class="content">

            <div b="1">内容一</div>

            <div class="hide">内容二</div>

            <div class="hide">内容三</div>

        </div>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('.menu-item').click(function(){

            $(this).addClass('active').siblings().removeClass('active');

            //var v=$(this).index();

            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

        });

    </script>

</body>

</html>

3. 文件操作

文档处理：

	append

	prepend

	after

	before

	remove

	empty

实例1，添加内容$('#u1').append(temp); 追加内容，往后面加,增加小儿子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input id="t1" type="text"/>

    <input id="a1" type="button" value="添加"/>

    <ul id="u1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('#a1').click(function(){

            var v=$('#t1').val();

            var temp="<li>"+v+"</li>";

            $('#u1').append(temp);

        })

    </script>

</body>

</html>

运行结果：

4. 往前面加内容。$('#u1').prepend(temp); 增加大儿子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input id="t1" type="text"/>

    <input id="a1" type="button" value="添加"/>

    <ul id="u1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('#a1').click(function(){

            var v=$('#t1').val();

            var temp="<li>"+v+"</li>";

            //$('#u1').append(temp);

            $('#u1').prepend(temp);

        })

    </script>

</body>

</html>

效果图：

5.追加它的哥哥和弟弟。$('#u1').before(temp);     $('#u1').after(temp);

6.删除操作，让用户填索引号，通过索引号删除。

$('#u1 li').eq(index).empty();只是清空内容，标签还在. 
$('#u1 li').eq(index).remove();移除标签，同时内容也就移除了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input id="t1" type="text"/>

    <input id="a1" type="button" value="添加"/>

    <input id="a2" type="button" value="删除"/>

    <input id="a3" type="button" value="复制"/>

    <ul id="u1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('#a1').click(function(){

            var v=$('#t1').val();

            var temp="<li>"+v+"</li>";

            //$('#u1').append(temp);

            $('#u1').prepend(temp);

        })

        $('#a2').click(function(){

            var index=$('#t1').val();

            //$('#u1 li').eq(index).empty();只是清空内容，标签还在.

            $('#u1 li').eq(index).remove();

        $('#a3').click(function(){

            var index=$('#t1').val();

            var v=$('#u1 li').eq(index).clone();

            $('#u1 li').append(v);

        })

    </script>

</body>

</html>

两种方法实现TAB菜单及文件操作的更多相关文章

  1. SQL Server中灾难时备份结尾日志(Tail of log)的两种方法

    转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...

  2. 怎么在CAD中测量图纸距离？来看看这两种方法

    在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...

  3. 两种方法上传本地文件到github

    https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...

  4. 两种方法上传本地文件到github(转)

    自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...

  5. [转载]C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 by 大龙哥 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char ...

  6. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

  7. Maven使用第三方jar文件的两种方法

    转于http://blog.csdn.net/youhaodeyi/article/details/1729116 主要用于回查与标记 在Maven中,使用第三方库一般是通过pom.xml文件中定义的 ...

  8. MySQL命令执行sql文件的两种方法

    MySQL命令执行sql文件的两种方法 摘要:和其他数据库一样,MySQL也提供了命令执行sql脚本文件,方便地进行数据库.表以及数据等各种操作.下面笔者讲解MySQL执行sql文件命令的两种方法,希 ...

  9. C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...

随机推荐

  1. Android：制作聊天气泡点9图

    步骤一:选择res下的一张图片,右击选择“Create 9-Patch File” 步骤二:确定点9图的名字,只能修改.9.png之前的信息 步骤三:在同目录下会生成刚才创建的点9图,双击打开进行编辑 ...

  2. pandaboard es 制作SD启动卡OMAP4460

    1. 本次使用的是chipsee的板子,带屏幕的,先把资料传到Ubuntu的共享目录下 2. 进入共享目录 /mnt/hgfs/ubuntu_share/pandboard_es_linux# 3. ...

  3. bootstrap的Alerts中 可以放置p标签 设置 align="center" 用来设置文本居中

    效果

  4. Python列表推导式和嵌套的列表推导式

    列表推导式提供了一个更简单的创建列表的方法.常见的用法是把某种操作应用于序列或可迭代对象的每个元素上,然后使用其结果来创建列表,或者通过满足某些特定条件元素来创建子序列. 例如,假设我们想创建一个平方 ...

  5. 关于购买Redis服务器：腾讯云、阿里云还是华为云？

    个人分类: redis使用 编辑 新年伊始,很多商家都开始进行新年产品大促销,在分布是缓存Redis领域,几家大公司也是打得如火如荼,各有千秋啊. 现在市场上比较有口碑的商家有腾讯云.阿里云.华为云三 ...

  6. 华为笔试——C++的int型数字位排序

    题目:int型数字位排序 题目介绍:输入int 型整数,按照从右至左的顺序,返回不含重复数字的新整数. 例: 输入: 99824270 输出: 072489 分析:乍一看很简单,但是很容易忽略int ...

  7. .NET导出Excel之NPOI

    前段时间研究过微软的Excel导出.table输出Excel,而它们也存在一些弊端: 1.对于微软的Excel导出存在一些弊端,如:需要安装Office软件.速度问题: 2.table输出Excel在 ...

  8. JavaScript/Jquery：Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  9. 0917 词法分析程序（java版）

    1.运行结果: 2.源代码: package 词法分析;import java.util.Scanner;public class fenxi {public static void main(Str ...

  10. 改进意见的答复及bug重现

    各组对本组的互评链接如下 Thunder:http://www.cnblogs.com/vector121/p/7905300.html 王者荣耀交流协会:http://www.cnblogs.com ...