jQuery实现一个简单的下拉菜单导航功能示例
本文通过一个实例说明jQuery实现了下拉菜单的简单导航功能。分享给大家参考,如下:
我们先来看看跑步效果:
具体代码如下:
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/title www . JB 51 . net jquery导航/title style type=' text/CSS ' # menu { width :300 px;左边距left:auto右边距: auto;}.has _ children { background : # 555;color: # fffcursor:pointer指针;}.突出显示{ color: # fff背景:绿色;} div { padding:0} div a { background: # 888display:nonefloat:left宽度width:300px} /style!-引入jquery-script src=' http : jquery 1 . 3 . 2 . js ' type=' text/JavaScript '/script script type=' text/JavaScript '/等待dom元素加载。$(文档)。ready (function () {$(')。has _ children’)。单击(function () {$ (this))。add class(' highlight ')//添加高亮类。儿童(' a ')。显示()。end() //显示子节点的A元素,并将其重新定位到最后一个操作元素。兄弟姐妹()。remove class(' highlight ')//获取元素的同级元素并移除它们的highlight类。儿童(' a ')。hide();//隐藏同级元素下的A元素});});/script/head body div id=' menu ' div class=' has _ children ' span第1章-了解jQuery/span a1.1-JavaScript和JavaScript库/A 1.2-添加jQuery/A 1.3-编写简单的jQuery代码/A 1.4-jQuery对象和DOM对象/A 1.5-解决jQuery和其他库之间的冲突/A 1.6-jQuery开发工具和插件/A 1.7-摘要/A/div class=' has _ children ' span第2章-jQuery选择器/a a 2.8-summary/a/Div Div class=' has _ children ' span第3章-jquery中的DOM操作/span a 3.1-DOM操作的分类/a a 3.2-jQuery中的DOM操作/a a3.3-案例研究——某网站的超链接和图片提示效果/a a 3.4-summary/a/Div/Div/body/HTMl更多对jQuery感兴趣的读者,请查看本网站主题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》
希望本文对大家的jQuery程序设计有所帮助。
版权声明:jQuery实现一个简单的下拉菜单导航功能示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。