jQuery----左侧导航栏面板切换实现

页面运行结果：

                                                    

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

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

页面结构：

实现思路：

①给大的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>