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. python 内置模块(sys)

    sys.argv           命令行参数List,第一个元素是程序本身路径sys.exit(n)        退出程序,正常退出时exit(0)sys.version        获取Py ...

  2. 【MySQL函数】MySQL 5.5从零开始学第六章

    说明:本文总结自:<MySQL 5.5从零开始学>第六章 MySQL中的函数包括: 数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数和加密函数等. 函数: 表示对输入参数值 ...

  3. 180716-Centos时区设置

    使用timedatectl命令同步时间并设置时区 I. timedatactl命令 1. 使用帮助 timedatectl -h 2. 命令示例 2.1 显示系统的当前时间和日期 timedatect ...

  4. Python中abs()和math.fabs()区别

    描述:Python中fabs(x)方法返回x的绝对值.虽然类似于abs()函数,但是两个函数之间存在以下差异: abs()是一个内置函数,而fabs()在math模块中定义的. fabs()函数只适用 ...

  5. Python之requests的安装

    在 windows 系统下,只需要输入命令 pip install requests ,即可安装. 在 linux 系统下,只需要输入命令 sudo pip install requests ,即可安 ...

  6. IT视频课程集(包含各类Oracle、DB2、Linux、Mysql、Nosql、Hadoop、BI、云计算、编程开发、网络、大数据、虚拟化

    马哥Linux培训视频课程:http://pan.baidu.com/s/1pJwk7dp Oracle.大数据系列课程:http://pan.baidu.com/s/1bnng3yZ 天善智能BI培 ...

  7. js 零零散散的总结。

    Array.slice.call(arguments);可以将一个类数组转化为数组. Array.from() ,[...arr];也可以将一个类数组转化为数组(es6). (function() { ...

  8. 关于《数据结构》课本KMP算法的理解

    数据结构课上讲的KMP算法和我在ACM中学习的KMP算法是有区别的,这里我对课本上的KMP算法给出我的一些想法. 原理和之前的KMP是一样的https://www.cnblogs.com/wkfvaw ...

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

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

  10. sprint1_11.15燃尽图（第二天）

    找相关的图片资料用于做点餐系统的界面 燃尽图: