Jquery实现导航栏效果代码

时间：2022-06-25 17:47:29 编辑：袖梨来源：一聚教程网

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

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

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

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

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

上面这句话有点绕，仔细读一下还是能明白其中的逻辑关系的。拆分一下就可以这样理解：$(this)就是被触发的元素；addClass()就是为其增加一个css类；next()就是其紧挨着的html标签；show()就是显示出来；parent()就是获取被触发元素的父级元素；siblings()就是获取父级元素的同一级元素；children()就是获取子元素；removeClass()移除一个css类；hide()隐藏元素。

怎么样，很简单吧，一句代码就可以完成一个友好的导航栏。PS：current类是用css写的一个高亮该栏目的样式。有些人可能觉得代码似曾相识，我是根据《锋利的Jquery》这一本书学习的。

推荐专题

最新下载

热门教程

Jquery实现导航栏效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程