JQuery导航选择特效

一、实现效果

1.初始化效果：未添加样式和特效

2、添加CSS样式

3、最终效果

二、JQuery代码

 1  <!--编写JQuery代码-->
 2     <script type="text/javascript">
 3         $(document).ready(function(){
 4             $(".level1>a").click(function(){
 5                 $(this).addClass("current")     //给当前元素添加current样式
 6                         .next().show()     //下一个元素显示
 7                         .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式
 8                         .next().hide();  //他们的下一个元素隐藏
 9                 return false;
10             })
11         })
12     </script>

三、完整代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>JQuery制作导航栏</title>
  6     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>    <!--引入JQuery库文件-->
  7     <style type="text/css">
  8         /*设置通用样式*/
  9         *{
 10              padding: 0;
 11              margin: 0;
 12          }
 13         .box{
 14             margin: auto;
 15             border:  solid #BEBEBE 1px;
 16             width: 160px;
 17         }
 18         ul{
 19             list-style: none;
 20         }
 21         a {
 22             color:#00007F;
 23             text-decoration:none;
 24             line-height: 28px;
 25         }
 26 
 27         /*level1*/
 28         .level1 a{
 29             display: block;    /*!!!转换为块状元素*/
 30             height: 30px;
 31             width: 150px;
 32             background-color: #EBF3F8;
 33             padding-left: 10px;
 34             border: solid 1px #BEBEBE;
 35         }
 36         .level1 a.current{
 37             background-color:#B1D7EF;
 38         }
 39         /*level2*/
 40         .level2 a{
 41             background: #ffffff;
 42             color: #8E8E8E;
 43             border: none;
 44         }
 45         .level2 a:hover {
 46             color:red;
 47         }
 48         .level2{
 49             display: none;
 50         }
 51     </style>
 52 
 53     <!--编写JQuery代码-->
 54     <script type="text/javascript">
 55         $(document).ready(function(){
 56             $(".level1>a").click(function(){
 57                 $(this).addClass("current")     //给当前元素添加current样式
 58                         .next().show()     //下一个元素显示
 59                         .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式
 60                         .next().hide();  //他们的下一个元素隐藏
 61                 return false;
 62             })
 63         })
 64     </script>
 65 
 66 </head>
 67 <body>
 68     <div class="box">
 69         <ul class="menu">
 70             <li class="level1">
 71                 <a href="#">衬衫</a>
 72                 <ul class="level2">
 73                     <li><a href="#">短袖衬衫</a></li>
 74                     <li><a href="#">长袖衬衫</a></li>
 75                     <li><a href="#">短袖T恤</a></li>
 76                     <li><a href="#">长袖T恤</a></li>
 77                 </ul>
 78             </li>
 79             <li class="level1">
 80                 <a href="#">卫衣</a>
 81                 <ul class="level2">
 82                     <li><a href="#">开襟卫衣</a></li>
 83                     <li><a href="#">套头卫衣</a></li>
 84                     <li><a href="#">运动卫衣</a></li>
 85                     <li><a href="#">童装卫衣</a></li>
 86                 </ul>
 87             </li>
 88             <li class="level1">
 89                 <a href="#">裤子</a>
 90                 <ul class="level2">
 91                     <li><a href="#">短裤</a></li>
 92                     <li><a href="#">休闲裤</a></li>
 93                     <li><a href="#">牛仔裤</a></li>
 94                     <li><a href="#">免烫卡其裤</a></li>
 95                 </ul>
 96             </li>
 97         </ul>
 98     </div>
 99 </body>
100 </html>

View Code