zoukankan      html  css  js  c++  java
  • 两种方法实现TAB菜单及文件操作

    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="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="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>
    
  • 相关阅读:
    "etc/profile" E212: Can't open file for writing
    Swift 判断是否是调试模式以及是否越狱
    密码技术之基本介绍
    算法
    App Thinning (App 瘦身)
    #pragma once vs #ifndef
    APUE学习之进程控制
    Socket编程-基础使用
    Link Script 学习
    PX4学习之-uORB msg 自动生成模板解读
  • 原文地址:https://www.cnblogs.com/momo8238/p/7467319.html
Copyright © 2011-2022 走看看