页面运行结果：

                                                    

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

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

页面结构：

实现思路：

①给大的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. A Complete Tutorial to Learn Data Science with Python from Scratch

    A Complete Tutorial to Learn Data Science with Python from Scratch Introduction It happened few year ...

  2. How to download a CRX file from the Chrome web store

    如何从 谷歌浏览器商店 离线下载 谷歌浏览器扩展 Simply copying the Chrome store extension url to the following website: htt ...

  3. android studio使用openssl

    前言 逆向的基础是开发, 逆向分析时很多时候会使用一些公开的加密函数来对数据进行加密,通过使用 openssl 熟悉下. 正文 首先得先编译出来 openssl,然后把它们复制到你的工程目录下. in ...

  4. UBUNTU16.04 连接不了cn.archive.ubuntu.com

    ubuntu系统更换源 更换源的方法非常简单:修改/etc/apt/sources.list文件即可 进入目录 /etc/apt cd /etc/apt修改sources.list文件 sudo vi ...

  5. JVM知识（二）：类加载器原理

    我们知道我们编写的java代码,会经过编译器编译成字节码(class文件),再把字节码文件装载到JVM中,最后映射到各个内存区域中,我们的程序就可以在内存中运行了.那么问题来了,这些字节码文件是怎么装 ...

  6. Oracle EBS 验证应收是否等于加税

    --To validate whether a transaction's REC is equal to its REV plus TAX or not --验证应收是否等于收入加税 SELECT ...

  7. Oracle EBS 多节点停应用

    adstpall.sh   -mode=allnodes app/apps

  8. 只能在堆上生成的对象 VS. 只能在栈上生成的对象

    1. 只能在堆上 即禁止在栈上生成.如何实现? 当对象建立在栈上面时,是由编译器分配内存空间的,调用构造函数来构造栈对象.如果类的析构函数是私有的,则编译器不会在栈空间上为类对象分配内存. 所以,只需 ...

  9. teradata 字符串数据合并 在concat（）函数无法使用的情况下

    在teradata sql中不存在concat()函数或者stuff()函数,在此情况下,如何实现多条字符串数据合并成一行? 在查找不同方法过程中,在stackflow中找到最简便的方法,使用xml_ ...

  10. mysql优化——explain详解

    MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提供任何调整建议,但它能够提供重要的信息 ...