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>
  • 相关阅读:
    FFmpeg入门,简单播放器
    Linux系统编译Win32版本adb
    检测目标程序ELF bit是32还是64
    Swift编程资料全集
    Swift编程资料总结
    cocos2d-html5学习之三-为sprite添加触摸事件
    Cocos2d-html5学习笔记二
    cocos2d-x学习笔记一
    NSViewAnimation进行视图和窗口动画
    Cocoa中NSAnimation动画简介
  • 原文地址:https://www.cnblogs.com/anhao-world/p/14411597.html
Copyright © 2011-2022 走看看