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. day8 RHCE

    12 .实现一个 web 服务器在server0上配置一个站点http://server0.example.com,然后执行以下步骤: 从http://classroom.example.com/ma ...

  2. 小计Tomcat的调优思路

    描述 最近在补充自己的短板,刚好整理到Tomcat调优这块,基本上面试必问,于是就花了点时间去搜集一下tomcat调优 都调了些什么,先记录一下调优手段,更多详细的原理和实现以后用到时候再来补充记录, ...

  3. ----------BMI指数小程序----------

    # 1.创建并输出菜单, 菜单是不可变的. 所以使用元组# menus = ("1, 录入", "2, 查询", "3, 删除", &quo ...

  4. 套接口socket编程(Client/Server编程实例)

    基本概念 套接口也就是网络中的ID.网络通信,归根到底还是进程间通信(不同计算机上的进程间的通信).在网络中,每一个节点(计算机或路由器)都有一个网络地址,也就是IP地址. IP地址:在网络中唯一标识 ...

  5. 【Python入门总结】

    用了两周时间将python的基本语法和模块过了一遍,alex的视频也简单看了下;并且在项目中直接上了python解析语义的实现,初步感觉到了python语言的魅力.下一步,会按照廖雪峰的python学 ...

  6. Python3 函数作用域

    一 LEGB 什么是LEGB? L:local 函数内部作用域 E:enclosing 函数内部与内嵌函数之间 G:global 全局作用域 B:build-in 内置作用域 顺序是什么? 跟名字一样 ...

  7. angularjs工作原理解析

    个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析 ...

  8. nginx 根据get参数重定向（根据电视访问的mac地址传递的值，来重定向访问别的url地址，这样就可以进行单台的测试环境。。）

    背景是这样的: 公司要做所有客户端的迁移到别的云平台,但又担心会有问题,所以考虑分批次迁移过去,这样就需要迁移部分用户,因为客户端刷但都是统一但rom包,不能轻易发生改动,所以决定用重定向方式将部分客 ...

  9. DP----入门的一些题目(POJ1088 POJ1163 POJ1050)

    动态规划入门 DP 基本思想 具体实现 经典题目 POJ1088 POJ1163 POJ1050 (一) POJ1088,动态规划的入门级题目.嘿嘿,连题目描述都是难得一见的中文. 题目分析: 求最长 ...

  10. MySQL数据库错误号：2003 - Can't connect to MYSQL server on 'localhost'(10061)

    打开Windows+R在里面输入services.msc打开服务 在MySQL服务是右键点击启动,让其状态显为正在运行即可 启动完毕,然后再用命令CMD去连接,或者Navicat都不再报上面的错