zoukankan      html  css  js  c++  java
  • tab菜单的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .active{
                background-color: brown;
            }
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
    
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 5px;
                cursor: pointer;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }
        </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.js"></script>
        <script>
            $('.menu-item').click(function () {
    
               $(this).addClass('active').siblings().removeClass('active')
                var targt = $(this).attr('a')
                $('.content').children("[b='"+ targt+"']").removeClass('hide').siblings().addClass('hide')
            });
    
        </script>
    </body>
    </html>

     第二种方式(通过索引实现):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .active{
                background-color: brown;
            }
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
    
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 5px;
                cursor: pointer;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }
        </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.js"></script>
        <script>
            $('.menu-item').click(function () {
    
               $(this).addClass('active').siblings().removeClass('active')
                $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
            });
    
        </script>
    </body>
    </html>
  • 相关阅读:
    pytest实际编码中特殊问题的解决
    python+locust性能测试实例
    python使用eval动态调用函数及其在测试用例中断言的应用
    python中列表生成式的两种用法
    pycharm中的Terminal无法使用git命令
    ruamel.yaml的使用
    pip安装模块失败如何解决
    locust的setup等相关函数的使用
    python模块-optparse(解析命令行参数)
    (转)locust源码目录结构及模块作用
  • 原文地址:https://www.cnblogs.com/anhao-world/p/14411597.html
Copyright © 2011-2022 走看看