页面运行结果：

                                                    

点击曹操　　　　　　　　　点击刘备　　　　　　　　点击孙权　　　　　　　　原图

需求说明：原图如上所示，点击一方诸侯的时候，显示该诸侯手下猛将，其他诸侯手下猛将隐藏

页面结构：

实现思路：

①给大的li注册鼠标点击事件

当鼠标点击时候，获取当前li的ul下的所有的li，调用元素的show（）方法。注意，该方法中可以加参数（数组），控制元素显示的快慢  $(this).children( "ul" ).find( "li" ).show(500);

　　　　　　　　获取当前li的所有的兄弟li：$(this).siblings( "li" )；

　　　　　　　　获取兄弟li下的ul：$(this).siblings( "li" ).children( "ul" )；

　　　　　　　　获取兄弟li下ul中的所有的li；$(this).siblings( "li" ).children( "ul" ).find( "li" )；

　　　　　　　　设置上述其他的li隐藏：$(this).siblings( "li" ).children( "ul" ).find( "li" ).hide(500)；

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>导航栏项目切换</title>

         <style type="text/css">

             *{

                 padding: 0px;

                 margin: 0px;

             }

             #nav_box{

                 width: 100px;

                 /* 高度不设置的时候盒子根据内容伸缩 */

             }

             ul{

                 list-style: none;

             }

             .nav_head li{

                 background-color: gray;

                 color: white;

                 text-align: center;

                 font-size: 20px;

                 border: 1px solid black;

                 cursor: pointer;

             }

             .nav_head li ul li{

                 border: 0.5px solid black;

                 font-size: 14px;

                 background-color: lightgray;

                 color: black;

                 border-collapse: separate;

                 display: none;

                 }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

                 //给盒子中的各个导航项注册点击事件

                 $(".nav_head>li").click(function(){

                     $(".nav_head>li").children("ul").find("li").hide(300);

                     $(this).children("ul").find("li").show(300);

                 });

             });

         </script>

     </head>

     <body>

         <div id="nav_box">

             <ul class="nav_head">

                 <li>曹操

                     <ul>

                         <li>张辽</li>

                         <li>张郃</li>

                         <li>夏侯惇</li>

                         <li>夏侯渊</li>

                         <li>许褚</li>

                         <li>典韦</li>

                         <li>曹仁</li>

                         <li>曹洪</li>

                         <li>徐晃</li>

                     </ul>

                 </li>

                 <li>刘备

                     <ul>

                         <li>关羽</li>

                         <li>张飞</li>

                         <li>赵云</li>

                         <li>马超</li>

                         <li>黄忠</li>

                         <li>魏延</li>

                     </ul>

                 </li>

                 <li>孙权

                     <ul>

                         <li>甘宁</li>

                         <li>太史慈</li>

                         <li>程普</li>

                         <li>周瑜</li>

                         <li>韩当</li>

                         <li>周泰</li>

                         <li>蒋钦</li>

                         <li>祖茂</li>

                         <li>黄盖</li>

                     </ul>

                 </li>

             </ul>

         </div>

     </body>

 </html>

jQuery----左侧导航栏面板切换实现的更多相关文章

  1. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  2. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  3. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  4. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  5. 导航栏图标切换：click事件，hover事件

    最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE ...

  6. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  8. jQuery实现导航栏

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

  9. dedecms左侧导航栏不显示问题

    dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: ​ 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...

随机推荐

  1. spring boot(16)-mail发邮件

    上一篇讲了如何处理异常,并且异常最终会写入日志.但是日志是写在服务器上的,我们无法及时知道.如果能够将异常发送到邮箱,我们可以在第一时间发现这个异常.当然,除此以外,还可以用来给用户发验证码以及各种离 ...

  2. Mysql 事务日志(Ib_logfile)

    mysql的innodb中事务日志ib_logfile(0/1) 概念:事务日志或称redo日志,在mysql中默认以ib_logfile0,ib_logfile1名称存在,可以手工修改参数,调节开启 ...

  3. MySQL · 数据恢复 · undrop-for-innodb

    Ref:https://www.aliyun.com/jiaocheng/1109809.html  摘要: 简介 undrop-for-innodb 是针对 innodb 的一套数据恢复工具,可以从 ...

  4. swift如何打印对象的地址

    swift如何打印对象的地址 打印对象的地址还是有着很多实用价值的,在swift中,你可以用以下的方式打印一个对象的地址: 打印结果: 有时候,if let a = b 这种操作会给人一种错觉,认为 ...

  5. word 排版用到双直线、波浪线、虚线 、直线、隔行线等技巧

    在办公或毕业设计时,有时排版需要插入双直线.波浪线.虚线 .直线.隔行线等而烦恼, 今天小白与大家分享技巧如下: 感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮.本文欢迎各位转载,但 ...

  6. Linux grep/egrep命令详解

    grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来 grep搜索成功,则返回0,如果搜索不成功,则返回1,如果搜索的文件不存在,则返回2. grep的规则表达式( ...

  7. 铁乐学Python_day04-列表LIST

    文:铁乐与猫 2018-3-21 Python内置的一种数据类型是列表:list. list是一种有序的集合,可以随时添加和删除其中的元素. 序列中的每个元素都分配一个数字(下标) - 它的位置,或索 ...

  8. IIS6与IIS7中的w3wp工作进程

    在IIS6中,每一个网站都有对应的应用程序池,在应用程序池有运行着网站的Application,在默认情况下,所有的网站的应用程序都会分配到默认的应用程序池当中,   当然,我们可以新建一个应用程序池 ...

  9. ssh连接CentOS7服务器

    ssh原理: ssh是一种专为远程登陆会话和其他网络服务提供安全性的协议,主要用于远程登陆. ssh采用公钥加密,在远程连接时,远程主机接收到用户的登录请求,将自己的公钥发送给用户,用户使用这个公钥将 ...

  10. Hadoop HBase概念学习系列之HBase里的高表设计概念（表设计）（二十八）

    在下面这篇博文里,我给各位博客们,分享了创建HBase表,但这远不止打好基础. HBase编程 API入门系列之create(管理端而言)(8) 在关系型数据库里,表的高表和宽表是不存在的.在如HBa ...