zoukankan      html  css  js  c++  java
  • 左侧菜单

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .hide{
    display: none;
    }
    </style>
    </head>
    <body>
    <div>
    <div class="menu">菜单一</div>
    <div class="con hide">
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
    </div>
    </div>

    <div>
    <div class="menu">菜单二</div>
    <div class="con hide">
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
    </div>
    </div>

    <div>
    <div class="menu">菜单三</div>
    <div class="con hide">
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
    </div>
    </div>
    <script src="jquery-3.2.1.js"></script>
    <script>
    $(function () {
    bindclick();
    });
    function bindclick() {
    $('.menu').click(function () {
    $(this).next().removeClass('hide').parent().siblings().children('.con').addClass('hide')
    })
    }
    </script>
    </body>
    </html>



    function bindclick1() {
            $('.menu').click(function () {
    
                if($(this).next().hasClass('hide')){
                     $(this).next().removeClass('hide').parent().siblings().children('.left-item1').addClass('hide')
                }else{
                     $(this).next().addClass('hide').parent().siblings().children('.left-item1').addClass('hide')
                }
    
    
            })
        }
    左侧菜单新功能
    Java学习内容
  • 相关阅读:
    (第九周)视频发布及git统计报告
    (第九周)团队项目16
    (第九周)团队项目15
    (第九周)团队项目14
    C# 中请求数据方式
    C#中Json和List/DataSet相互转换
    C#枚举注释实例
    C#常用简单线程实例
    C#动态多线程实例
    MySql中文乱码
  • 原文地址:https://www.cnblogs.com/wangtc/p/10576269.html
Copyright © 2011-2022 走看看