夏日博客

A-A+

Jquery实现导航栏效果代码

2016年01月09日 前端设计 暂无评论 阅读 1,466 views 次

导航栏对于我们程序开发的人来讲是非常的常见的事情了，下面小编来给大家介绍Jquery实现导航栏效果代码，希望下文可以帮助到大家．

导航栏相信开发网站的开发者们都是再熟悉不过了，没有任何一个网站可以忽略导航栏而不计。div+css就可以实现导航栏，但是纯css并不能做出一些像Jquery这么友好的动画效果。当然在编程语言飞速发展的今天，css3+html5就可以实现，这里暂且不论。一个漂亮友好的导航栏不仅可以增加用户体验，还可以充分利用页面空间，何乐而不为呢？

项目需求:做一个简单的导航栏，单击不同商品名称，显示相应的内容。

HTML代码如下(css就不再写了，相信这都难不倒聪明的开发者们)：

  1. <div class="box">  
  2.    <ul class="menu">  
  3.        <li class="level1">  
  4.             <a href="">衬衫</a>  
  5.             <ul class="level2">  
  6.                 <li><a href="">长袖衬衫</a></li>  
  7.                 <li><a href="">短袖衬衫</a></li>  
  8.                 <li><a href="">条纹衬衫</a></li>  
  9.                 <li><a href="">格子衬衫</a></li>  
  10.             </ul>  
  11.         </li>  
  12.        <li class="level1">  
  13.             <a href="">裤子</a>  
  14.             <ul class="level2">  
  15.                 <li><a href="">七分裤</a></li>  
  16.                 <li><a href="">九分裤</a></li>  
  17.                 <li><a href="">牛仔裤</a></li>  
  18.                 <li><a href="">休闲裤</a></li>  
  19.             </ul>  
  20.         </li>  
  21.        <li class="level1">  
  22.             <a href="">外套</a>  
  23.             <ul class="level2">  
  24.                 <li><a href="">阿迪达斯</a></li>  
  25.                 <li><a href="">耐克乔丹</a></li>  
  26.                 <li><a href="">希努尔</a></li>  
  27.                 <li><a href="">特步李宁</a></li>  
  28.             </ul>  
  29.         </li>  
  30.    </ul>  
  31.  </div>  

Jquery代码如下(jquery库就不再写怎么引入了)：

  1. <script type="text/javascript">  
  2.     $(function(){  
  3.         $(".level1 > a").click(function(){  
  4.             $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();  
  5.             return false;  
  6.         });  
  7.     });  
  8. </script>  

下面我们来解释一下上面这段代码是什么意思:当鼠标点击level1中的子元素a这个标签的时候，触发一个动作，给它添加一个名为current的class，然后将a标签后面的紧邻元素显示出来；与此同时，将它父级元素的同级元素内部的子元素a标签去掉名为current的class，并且将紧挨着它们后面的元素隐藏。

上面这句话有点绕，仔细读一下还是能明白其中的逻辑关系的。拆分一下就可以这样理解：$(this)就是被触发的元素；addClass()就是为其增加一个css类；next()就是其紧挨着的html标签；show()就是显示出来；parent()就是获取被触发元素的父级元素；siblings()就是获取父级元素的同一级元素；children()就是获取子元素；removeClass()移除一个css类；hide()隐藏元素。
怎么样，很简单吧，一句代码就可以完成一个友好的导航栏。PS：current类是用css写的一个高亮该栏目的样式。有些人可能觉得代码似曾相识，我是根据《锋利的Jquery》这一本书学习的。

标签：

给我留言