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. Nginx入门篇（五）之LNMP环境应用

    一.LNMP组合工作原理 (1)用户通过浏览器输入域名请求Nginx web服务: (2)Nginx对请求的资源进行判断,如果是静态资源,则由Nginx返回给用户:如果是动态请求(.php文件),那么 ...

  2. WPF 如何自定义一个弹框

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 简述: 手工以原生Grid的方式,自定义了一个仿弹窗效果,优点可以自定义,缺点需要自己实现以及维护整个弹窗的效 ...

  3. 【JUC源码解析】FutureTask

    简介 FutureTask, 一个支持取消行为的异步任务执行器. 概述 FutureTask实现了Future,提供了start, cancel, query等功能,并且实现了Runnable接口,可 ...

  4. html表单总结

    总结了下html表单: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. lxd&openstack-lxd源码剖析

    lxd:https://linuxcontainers.org/lxd/,目标是融入到openstack体系被管理,像虚拟机一样被管理使用.从如下图可知,并非走的是libvirt-lxc路线,而是no ...

  6. Ubuntu16.04使用Tarball安装ntp

    最近在学习linux,看书上例子(鸟哥的linux私房菜 P674),使用Tarball来安装ntp,出了点问题,提示错误,使用 ./configure 来检测程序时,出现如下提示: 提示少了 ope ...

  7. NO.2：自学python之路------变量类型、列表、字典

    引言 本周初步认识了库,并学习了Python中各种类型的变量和常用操作.并完成了较为完善的用户与商家购物界面设计. 正文 模块: Python有标准库和第三方库.第三方库需要安装才能使用.大量的库可以 ...

  8. presto——java.sql.SQLException: Error executing query与javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection?异常问题

    使用presto的时候以mysql为presto的数据源 安装的presto是0.95版本:使用的presto-jdbc是0.202的,这里使用jdbc去访问时候,connection可以链接成功,但 ...

  9. 创建hive与hbase关联的hive表与hbase表

    创建hive与hbase的关联表 create external table hive_hbase(rowkey string,name string,addr string,topic string ...

  10. strace 命令

    介绍 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...