zoukankan      html  css  js  c++  java
  • python:模态编程框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <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 #eeeeee;
            }
        </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 >内容一</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 res=$(this).index()
    //           var tes=$('.content').children(res)
    //           console.log(tes)
    //           获取索引位置
               $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
    
        });
    
    </script>
    
    
    
    </body>
    </html>
    模态编程框
  • 相关阅读:
    php gettext 注释
    autobench 测试笔记
    Android 常用布局视图
    路由器插入广告实现
    kafka 搭建与使用
    复制虚拟机之后,互相ping不通
    docker运行镜像提醒WARNING: IPv4 forwarding is disabled. Networking will not work.
    docker容器简单常用操作
    mongo通过URL连接IDEA
    gradle基础应用
  • 原文地址:https://www.cnblogs.com/xuehuahongmei/p/6146740.html
Copyright © 2011-2022 走看看