页面运行结果：

                                                    

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

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

页面结构：

实现思路：

①给大的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—12URL映射

    package com.sample.smartmap.controller; import java.util.List; import org.springframework.beans.fact ...

  2. 网络基础 Windows telnet使用简介及相关问题解决方案

    Windows telnet使用简介及相关问题解决方案 by:授客 QQ:1033553122 更改telnet的默认端口(23)(仅适用XP) 步骤: 进入cmd控制窗口 tlntadmn conf ...

  3. Linux Windows平台添加pip源

    直接应用 pip3 install django -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com​ ...

  4. Week7——JSON

    1.什么是JSON? JSON是JavaScript对象表示法,全称是JavaScript Objec Notation.它是存储和交换文本信息的语法,类似于XML.JSON是轻量级的文本数据交换格式 ...

  5. iostat 工具分析I/O性能

    iostat命令用途:主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和 ...

  6. 【Kettle】8、变量参数传递介绍

    本文为转载,感觉作者的辛勤劳作:http://blog.csdn.net/rotkang/article/details/21008271 ------------------------------ ...

  7. 封装NSMapTable并简易的使用

    封装NSMapTable并简易的使用 NSMapTable是弱引用的字典,可以用来存储对象,该对象消失了也没有关系,对于控制器越级跳转相当有用:) WeakDictionary.h 与 WeakDic ...

  8. Linux 系统的磁盘设备_【all】

    磁盘 ->RAID ->分区 ->格式化 ->挂载 基本的框架 a.硬盘的外部以及内部硬件结构,工作原理和读写原理b.RAID的划分(一块盘划分为一块或者多块的小虚拟磁盘,可以 ...

  9. Linux 正则表达式详解

    正则表达式(REGULAR):为处理大量的字符串而定义的一套规则和方法,为了处理大量字符串而生 常见命令参数 基础正则表达式 . :有且只有任意一个字符(包括空格) * :重复前面任意0或者多个字符 ...

  10. Linux 环境部署记录（一） - 基础设定

    时间设置 查看系统当前日期/时间: date -R 查看系统硬件时钟: hwclock --show 设置硬件时间: hwclock --set --date="07/18/17 20:55 ...