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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .outer{
     8             100%;
     9             height:1000px;
    10         }
    11         .menu{
    12             height:500px;
    13             30%;
    14             float: left;
    15             background-color:burlywood;
    16         }
    17         .content{
    18             height: 500px;
    19              70%;
    20             float: left;
    21             background-color:aqua;
    22         }
    23         .hide{
    24             display:none;
    25         }
    26     </style>
    27 </head>
    28 <body>
    29 <div class="outer">
    30     <div class="menu">
    31         <div class="item">
    32             <div class="title" onclick="show(this)">菜单一</div>
    33             <div class="con">
    34                 <div>111</div>
    35                 <div>111</div>
    36                 <div>111</div>
    37             </div>
    38         </div>
    39         <div class="item" >
    40             <div class="title" onclick="show(this)">菜单二</div>
    41             <div class="con hide">
    42                 <div>222</div>
    43                 <div>222</div>
    44                 <div>222</div>
    45             </div>
    46         </div>
    47 
    48         <div class="item">
    49             <div class="title" onclick="show(this)">菜单三</div>
    50             <div class="con hide">
    51                 <div>333</div>
    52                 <div>333</div>
    53                 <div>333</div>
    54             </div>
    55         </div>
    56     </div>
    57     <div class="content"></div>
    58 </div>
    59 <script src="jquery-3.3.1.min.js"></script>
    60 <script>
    61     function show(self) {
    62         $(self).next().removeClass('hide');
    63         $(self).parent().siblings().children('.con').addClass('hide');
    64     }
    65 </script>
    66 </body>
    67 </html>
  • 相关阅读:
    链表实现
    @Aspect
    mybatis plus
    using
    50道题
    梦想,青春,时间
    存储过程!!!
    事务,视图,索引
    高级查询--嵌套和相关,两套分页!!!
    学习笔记
  • 原文地址:https://www.cnblogs.com/506941763lcj/p/9938733.html
Copyright © 2011-2022 走看看