导航栏相信开发网站的开发者们都是再熟悉不过了，没有任何一个网站可以忽略导航栏而不计。div+css就可以实现导航栏，但是纯css并不能做出一些像Jquery这么友好的动画效果。当然在编程语言飞速发展的今天，css3+html5就可以实现，这里暂且不论。一个漂亮友好的导航栏不仅可以增加用户体验，还可以充分利用页面空间，何乐而不为呢？
项目需求：做一个简单的导航栏，单击不同商品名称，显示相应的内容。
HTML代码如下(css就不再写了，相信这都难不倒聪明的开发者们)：
<div class="box">
<ul class="menu">
<li class="level1">
<a href="">衬衫</a>
<ul class="level2">
<li><a href="">长袖衬衫</a></li>
<li><a href="">短袖衬衫</a></li>
<li><a href="">条纹衬衫</a></li>
<li><a href="">格子衬衫</a></li>
</ul>
</li>
<li class="level1">
<a href="">裤子</a>
<ul class="level2">
<li><a href="">七分裤</a></li>
<li><a href="">九分裤</a></li>
<li><a href="">牛仔裤</a></li>
<li><a href="">休闲裤</a></li>
</ul>
</li>
<li class="level1">
<a href="">外套</a>
<ul class="level2">
<li><a href="">阿迪达斯</a></li>
<li><a href="">耐克乔丹</a></li>
<li><a href="">希努尔</a></li>
<li><a href="">特步李宁</a></li>
</ul>
</li>
</ul>
</div>
Jquery代码如下(jquery库就不再写怎么引入了)：
<script type="text/javascript">
$(function(){
$(".level1 > a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
});
});
</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》这一本书学习的。