页面运行结果：

                                                    

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

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

页面结构：

实现思路：

①给大的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. 风云2号云图Mosaic Dataset处理

    # ---------------------------------------------------------------------------# -*- coding: utf-8 -*- ...

  2. web 学习资源

    学习 https://skills.bugbank.cn/ https://github.com/JnuSimba/MiscSecNotes 靶场 http://skysec.top/2018/01/ ...

  3. Pig join用法举例

    jnd = join a by f1, b by f2;   join操作默认的是内连接,只有两边都匹配才会保留   需要用null补位的那边需要知道它的模式: 如果是左外连接,需要知道右边的数据集的 ...

  4. Storm并行度

    1.Storm并行度相关的概念 Storm集群有很多节点,按照类型分为nimbus(主节点).supervisor(从节点),在conf/storm.yaml中配置了一个supervisor有多个槽( ...

  5. Android8.0适配那点事（一）

    最近有小伙伴说,7.0适配整了一波,现在又要来适配8.0,真是一波未平一波又起 但是作为开发者来说,学无止境,不跟上时代的步伐,肯定会被时代所淘汰... 话说Android P已经在路上了,你准备好了 ...

  6. Django 请求参数

    Django 请求参数 1.获取URL路径中的参数 需求:假设用户访问127.0.0.1/user/1/2,你想获取1,2.应该怎么操作呢? (1)未命名参数(位置参数) # 在项目下的urls.py ...

  7. Linux 加阿里yum源

    阿里 yum 源设置 阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/CentOS系统更换软件安装源 第一步:备份你的原镜像文件,以免出错后可以恢复.mv /etc ...

  8. zabbix系列之八——安装后配置三Triggers

    1Triggers(触发器) 描述 详细 备注 术语描述 1)触发器是评估监控项采集的数据的逻辑表达式,代表了当前系统状态. 2)触发器可定义一个什么数据是可接受的阈值,因此,如果接收的数据超过了可接 ...

  9. ASP.Net WebAPI的返回值

    Asp.Net WebAPI服务函数的返回值主要可以分为void.普通对象.HttpResponseMessag.IHttpActionResult e四种,本文这里简单的介绍一下它们的区别. 一.返 ...

  10. winform messagebox自动关闭

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...