一聚教程网:一个值得你收藏的教程网站

热门教程

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》这一本书学习的。

热门栏目