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>
  • 相关阅读:
    高效沟通
    Oracle播放多条 INSERT ALL
    oracle的同义词总结
    Brute force Attack
    爱因斯坦方程与小黑洞
    dom 编程(html和xml)
    dexposed框架Android在线热修复
    从微软小冰看微软运营手段的转型
    剑指offer_面试题_从上往下打印二叉树
    外面的wifi非常精彩,外面的wifi非常不安
  • 原文地址:https://www.cnblogs.com/506941763lcj/p/9938733.html
Copyright © 2011-2022 走看看