JQuery之左侧菜单

时间：2023-02-26 11:59:06
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .menu{

             float: left;width: 30%;height: 500px;background-color: antiquewhite;

         }

         .content{

             float: left;width: 70%;height: 500px;background-color: blue;

         }

         .title{

             background-color: black;

             color: white;

             height: 50px;

             line-height: 50px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

 <div>

     <div class="menu">

         <div class="item">

             <div class="title" onclick="Func(this);">菜单一</div>

             <div class="body ">

                 <div>1.1</div>

                 <div>1.2</div>

                 <div>1.3</div>

             </div>

         </div>

         <div class="item">

              <div class="title"onclick="Func(this);">菜单二</div>

              <div class="body hide">

                   <div>2.1</div>

                   <div>2.2</div>

                   <div>2.3</div>

              </div>

         </div>

         <div class="item">

              <div class="title"onclick="Func(this);">菜单三</div>

              <div class="body hide">

                   <div>3.1</div>

                   <div>3.2</div>

                   <div>3.3</div>

              </div>

         </div>

     </div>

     <div class="content"></div>

 </div>

 <script src="jquery-3.2.1.js"></script>

 <script>

     function Func(ths) {

         console.log($(ths).text());

         $(ths).next().removeClass('hide');

         $(ths).parent().siblings().find('.body').addClass('hide');

     }

 </script>

 </body>

 </html>

JQuery之左侧菜单的更多相关文章

  1. python &colon; jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. jquery实现左侧菜单 效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 亚马逊左侧菜单延迟z三角 jquery插件jquery&period;menu-aim&period;js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  5. jquery实现全选，取消，反选的功能&amp&semi;实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  7. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  8. 近20个绚丽实用的jQuery&sol;CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  9. 权限模块&lowbar;使用权限&lowbar;实现主页面的效果&lowbar;显示左侧菜单&amp&semi;只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

随机推荐

  1. Data Validate 之 Data Annotation

    什么是Data Annotation ? 如何使用 ? 自定义Validate Attribute EF  Db first中使用Data Annotation asp.net MVC中使用Data ...

  2. &lt&semi;&lt&semi;&lt&semi; Js中实现对字符串的截取

    1.函数split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例:var Data = "1/234/5678/9"; var str = shuju.split( ...

  3. 【HTML5】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

  4. Emit Mapper官方文档

    概述 优点 快速指导 类型转换 用户配置

  5. struts2与spring集成时&comma;关于class属性及成员bean自动注入的问题

    http://blog.csdn.net/sun_zhicheng/article/details/24232129

  6. 张王李相亲应用if else

    package hello; public class to { public static void main(String[]args){ int a =1,b=0; int c =1,d=0; ...

  7. PHP新手之学习类与对象&lpar;2&rpar;

    二.自动加载对象 很多开发者写面向对象的应用程序时对每个类的定义建立一个 PHP 源文件.一个很大的烦恼是不得不在每个脚本(每个类一个文件)开头写一个长长的包含文件列表. 在 PHP 5 中,不再需要 ...

  8. 批量检测GoAhead系列服务器中Digest认证方式的服务器弱口令

    最近在学习用python写爬虫工具,某天偶然发现GoAhead系列服务器的登录方式跟大多数网站不一样,不是采用POST等方法,通过查找资料发现GoAhead是一个开源(商业许可).简单.轻巧.功能强大 ...

  9. sql注入的防护

    一.严格的数据类型 在Java,C#等高级语言中,几乎不存在数字类型注入,而对于PHP,ASP等弱类型语言,就存在了危险. 防御数字型注入相对简单,如果不需要输入字符型数据,则可以用is_numeri ...

  10. LINUX PID 1 和 SYSTEMD

    要说清 Systemd,得先从Linux操作系统的启动说起.Linux 操作系统的启动首先从 BIOS 开始,然后由 Boot Loader 载入内核,并初始化内核.内核初始化的最后一步就是启动 in ...

相关文章