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         .menu{
     8             float: left;width: 30%;height: 500px;background-color: antiquewhite;
     9         }
    10         .content{
    11             float: left;width: 70%;height: 500px;background-color: blue;
    12         }
    13         .title{
    14             background-color: black;
    15             color: white;
    16             height: 50px;
    17             line-height: 50px;
    18         }
    19         .hide{
    20             display: none;
    21         }
    22 
    23     </style>
    24 </head>
    25 <body>
    26 <div>
    27     <div class="menu">
    28         <div class="item">
    29             <div class="title" onclick="Func(this);">菜单一</div>
    30             <div class="body ">
    31                 <div>1.1</div>
    32                 <div>1.2</div>
    33                 <div>1.3</div>
    34             </div>
    35         </div>
    36         <div class="item">
    37              <div class="title"onclick="Func(this);">菜单二</div>
    38              <div class="body hide">
    39                   <div>2.1</div>
    40                   <div>2.2</div>
    41                   <div>2.3</div>
    42              </div>
    43         </div>
    44         <div class="item">
    45              <div class="title"onclick="Func(this);">菜单三</div>
    46              <div class="body hide">
    47                   <div>3.1</div>
    48                   <div>3.2</div>
    49                   <div>3.3</div>
    50              </div>
    51         </div>
    52 
    53     </div>
    54     <div class="content"></div>
    55 </div>
    56 <script src="jquery-3.2.1.js"></script>
    57 <script>
    58     function Func(ths) {
    59         console.log($(ths).text());
    60         $(ths).next().removeClass('hide');
    61         $(ths).parent().siblings().find('.body').addClass('hide');
    62 
    63     }
    64 </script>
    65 </body>
    66 </html>
  • 相关阅读:
    题目3:爬楼梯
    题目1:删除排序数组中的重复数字
    最近目标
    软件工程----个人总结
    软件工程第二次作业——结对编程
    软件工程第一次作业补充
    爬楼梯
    买卖股票的最佳时机
    删除排序数组中的重复数字
    思考题
  • 原文地址:https://www.cnblogs.com/yspass/p/8128015.html
Copyright © 2011-2022 走看看