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. 【LG4631】[APIO2018]Circle selection 选圆圈

    [LG4631][APIO2018]Circle selection 选圆圈 题面 洛谷 题解 用\(kdt\)乱搞剪枝. 维护每个圆在\(x.y\)轴的坐标范围 相当于维护一个矩形的坐标范围为\([ ...

  2. 【LG5017】[NOIP2018pj]摆渡车

    [LG5017][NOIP2018pj]摆渡车 题面 洛谷 题解 震惊!普及组竟然考斜率优化??? 当然有其他的方法 首先我们转化一下模型 此题可以变为: 在一根时间轴上有一些点,每个时间点\(i\) ...

  3. springboot对security的后端配置

    一.Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring ...

  4. java Cannot resolve constructor 不能解析构造函数

    这个报错是因为构造函数要求传入的变量或对象等,必须在调用时传入,否则就无法解析构造函数,这跟调用方法必须把参数传齐了一个道理

  5. MQ配置安装

    一,MQ安装 ./mqlicense.sh -accept rpm -ivh MQSeries*.rpm --  rpm -qa|grep MQSeries 二,MQ配置 环境变量配置(MQM)实际安 ...

  6. win10 Docker Toolbox 默认路径不能写问题

    2018-8-30 这几天正学习docker,win10系统家庭版,未升级成专业版,只能安装Docker Toolbox来练习, 安装好后准备做个镜像,默认路径新建目录却提示不允许创建 由于Docke ...

  7. PHP版本的讲解

    原文地址:http://dev.meettea.com/show-90-1.html 最近发现很多PHP程序员对PHP版本知识了解不是很清楚,其中不乏PHP产品主力开发人员. PHP版本主要分三支:P ...

  8. artDialog基本使用

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口l  自适应内容artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适 ...

  9. vue关于img src动态赋值问题

    解决方法: 加个require()就可以了 <img :src="require('../assets/images/'+imgsrc+'.png')"/>

  10. Linux内核学习笔记（5）-- 进程调度概述

    进程调度程序是多任务操作系统的基础,它是确保进程能有效工作的一个内核子系统,负责决定哪个进程投入运行.何时运行以及运行多长时间.只有通过进程调度程序的合理调度,系统资源才能够最大限度地发挥作用,多进程 ...