你的位置:首页 > Java教程

[Java教程]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