zoukankan      html  css  js  c++  java
  • tab menu

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .hide{
    display: none;
    }
    .menu{
    height: 38px;
    background-color: #eeeeee;
    line-height: 38px;
    }
    .menu .menu-item{
    float:left;
    border-right: 1px solid;
    }
    .active{
    background-color: green;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div style="500px;margin:0 auto;">
    <div class='menu'>
    <div class="menu-item active" mid='m1'>菜单一</div>
    <div class="menu-item" mid='m2'>菜单二</div>
    <div class="menu-item" mid='m3'>菜单三</div>
    </div>
    <div class="content">
    <div class="" cid='m1'>内容1</div>
    <div class="hide" cid='m2'>内容2</div>
    <div class="hide" cid='m3'>内容3</div>
    </div>
    </div>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $('.menu-item').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    $('.content').children('[cid="'+$(this).attr('mid')+'"]').removeClass('hide').siblings().addClass('hide');

    })
    </script>
    </body>
    </html>
  • 相关阅读:
    [算法] 带权图
    哥德巴赫猜想 ——— 极限算法(你要是能写出比我用时还短的代码算我输)
    详解 位运算
    内存对齐模式 —— 原理讲解
    C语言 文件操作
    指针与数组
    队列的实现
    堆栈的实现
    线性表 详讲及使用
    树莓派
  • 原文地址:https://www.cnblogs.com/howhy/p/7346169.html
Copyright © 2011-2022 走看看