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>
  • 相关阅读:
    Python的优点和缺点
    如何在sed中使用变量方法及其简单
    shell脚本练习,创建数据文件注册用户并将用户信息存入文件内,用于模拟登录时使用
    shell脚本常用参数与格式
    运维方向和运维需要掌握的基本面
    linux系统awk命令精解
    数组去重方式
    原生js封装cookie获取、设置及删除
    sublime 浏览器快捷键设置
    background-image实现border效果及多图png如何实现background-size为原图一半
  • 原文地址:https://www.cnblogs.com/anhao-world/p/14411597.html
Copyright © 2011-2022 走看看