如何利用jQuery快速建立导航栏？

1、第一步，先要把jQuery库导入，才能使用jQuery中的方法。至于如何导入我会在下一个经验中详细讲解。

第二步，先要完成html代码，以及设置css样式，代码如图：

html代码中的内容可以根据自己的实际要求来填写！

2、使用快捷键F12浏览效果，如图。

第三步，返回代码页面，在css样式中设置一个id样式和类样式并且应用于每一个div中：代码如图。

第四步，使用jQuery实现导航栏效果，代码：

 $(".has_children").click(function(){

$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();

});

<!--代码作用是，当鼠标单击到class中含有has_childer的元素上的时候，给其添加一个名为highlight的class，然后将其内部<a>子元素都显示出来，并且被单击的class中含有has_children元素的同辈元素都去掉一个名为highlight的clsaa，同时同辈元素内部的<a>子元素全部隐藏。-->

如图。

3、第五步，快捷键F12浏览效果，如图：