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)；

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>导航栏项目切换</title>
 6         
 7         <style type="text/css">
 8             *{
 9                 padding: 0px;
10                 margin: 0px;
11             }
12             
13             #nav_box{
14                  100px;
15                 /* 高度不设置的时候盒子根据内容伸缩 */
16             }
17             ul{
18                 list-style: none;
19             }
20             
21             .nav_head li{
22                 background-color: gray;
23                 color: white;
24                 text-align: center;
25                 font-size: 20px;
26                 border: 1px solid black;
27                 cursor: pointer;
28             }
29             .nav_head li ul li{
30                 border: 0.5px solid black;
31                 font-size: 14px;
32                 background-color: lightgray;
33                 color: black;
34                 border-collapse: separate;
35                 display: none;
36                 }
37         </style>
38     
39         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
40         <script type="text/javascript">
41             $(function(){
42                 //给盒子中的各个导航项注册点击事件
43                 $(".nav_head>li").click(function(){
44                     $(".nav_head>li").children("ul").find("li").hide(300);
45                     $(this).children("ul").find("li").show(300);
46                 });
47                 
48             });
49         </script>
50     </head>
51     <body>
52         <div id="nav_box">
53             <ul class="nav_head">
54                 <li>曹操
55                     <ul>
56                         <li>张辽</li>
57                         <li>张郃</li>
58                         <li>夏侯惇</li>
59                         <li>夏侯渊</li>
60                         <li>许褚</li>
61                         <li>典韦</li>
62                         <li>曹仁</li>
63                         <li>曹洪</li>
64                         <li>徐晃</li>
65                     </ul>
66                 </li>
67 
68                 <li>刘备
69                     <ul>
70                         <li>关羽</li>
71                         <li>张飞</li>
72                         <li>赵云</li>
73                         <li>马超</li>
74                         <li>黄忠</li>
75                         <li>魏延</li>
76                     </ul>
77                 </li>
78                 
79                 <li>孙权
80                     <ul>
81                         <li>甘宁</li>
82                         <li>太史慈</li>
83                         <li>程普</li>
84                         <li>周瑜</li>
85                         <li>韩当</li>
86                         <li>周泰</li>
87                         <li>蒋钦</li>
88                         <li>祖茂</li>
89                         <li>黄盖</li>
90                     </ul>
91                 </li>
92             </ul>
93         </div>
94     </body>
95 </html>