页面运行结果：

                                                    

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

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

页面结构：

实现思路：

①给大的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. iis配置asp.net常见问题解决方案

    很多朋友在用IIS6架网站的时候遇到不少问题,而这些问题有些在过去的IIS5里面就遇到过,有些是新出来的,俺忙活了一下午,做 了很多次试验,结合以前的排错经验,做出了这个总结,希望能给大家帮上忙:) ...

  2. FastDFS部署安装全过程

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:https://pushy.site/posts/153205 ...

  3. exception tomcat startup.bat 闪退

    解决方案: startup.bat,右击->编辑,在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.7 (java jdk目录) SET TOMCAT_HOME=E: ...

  4. requestURI的组成部分

    使用 java EE HttpServletRequest对象获取的 request.getRequestURL(); request.getRequestURI(); request.getCont ...

  5. 【Java】生成UUID

    import java.util.UUID; public class MainProcess { public static void main(String[] args) { UUID uuid ...

  6. 5.servlet 上传文件

    一.maven依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>com ...

  7. Apache服务器如何通过.htaccess文件设置防盗链？

    Apache服务器通过.htaccess文件设置防盗链 用户经常面对的一个问题就是服务器的流量问题,而站点文件被盗链是其中最为主要的部分.所谓盗链,是指其他网站直接链接我们网站上的文件,一般来说,盗链 ...

  8. 【MySQL】sysbench压测服务器及结果解读

    主要压测范围包括CPU测试.磁盘IO测试.线程测试.OLTP测试等,那么sysbench就可以满足我们的压测需求.下面我们简单来看下sysbench的安装使用以及压测结果的解读. 一.sysbench ...

  9. [翻译] TransitionKit

    TransitionKit https://github.com/blakewatters/TransitionKit A simple, elegantly designed block based ...

  10. my sql 下左连接 右链接、内连接等应用，INNER JOIN LEFT JOIN RIGHT JOIN

    1.数据准备 建两个表格: create table student (idstu int, namestu ) ); ,"张三")(,"李四"),(,&quo ...