JQuery导航菜单选择特效

一、实现效果

1.初始化效果：未添加样式和特效

2、添加半铸钢钢性铸铁(铸造半钢)样式

3、最终效果

二、JQuery代码

！-编写框架代码-脚本类型='text/javascript'$(文档)。ready(function(){$(')).levela ').单击(function(){$(this)).addClass(')当前')//给当前元素添加目前的样式。下一个()。show() //下一个元素显示。父项()。兄弟姐妹()。儿童(' a ').removeClass(“”当前')//父元素的同辈元素的子元素a移除"当前"样式。下一个()。hide()；//他们的下一个元素隐藏返回false})})/脚本三、完整代码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-' title jquery制作导航栏/title脚本类型=' text/JavaScript ' src=' http :/JQuery库文件/jquery-.量滴js /脚本！-引入框架库文件- style type='text/css'/*设置通用样式*/* { padd :margin:}。box { margin: autoborder:固体# BEBEBE px宽度：像素；} ul { list-style :无；} a { color : # F；文本装饰：无；线高：像素；}/*级别*/。a级{显示：块；/*!转换为块状元素*/高度： px宽度：像素；背景色： # EBFF；左填充：像素；border:固体px # BEBEBE}.a.current级{底色： # BDEF；}/*级别*/。a级{ background : # ffffcolor : # EEE；border:无；}.级别a :悬停{颜色：红色；}.级别{ display:无}/style！-编写框架代码-脚本类型='text/javascript'$(文档)。ready(function(){$(')).levela ').单击(function(){$(this)).addClass('当前')//给当前元素添加目前的样式。下一个()。show() //下一个元素显示。父项()。兄弟姐妹()。儿童(' a ').removeClass(“”当前')//父元素的同辈元素的子元素a移除"当前"样式。下一个()。hide()；//他们的下一个元素隐藏返回false })})))/script/head dydiv class=' box ' ul class=' menu ' Li class=' level ' a href=' # '衬衫/aul class='level'lia href='# '短袖衬衫/a/lilia href='# '长袖衬衫/a/lilia href='# '短袖T恤/a/lilia href='# '长袖T恤/a/Li/ul/Lili class=' level ' a href=' # '卫衣/aul class='level'lia href='# '开襟卫衣/a/lilia href='# '套头卫衣/a/lilia href='# '运动卫衣/a/lilia href='# '童装卫衣/a/Li/ul/Lili class=' level ' a href=' # '裤子/aul class='level'lia href='# '短裤/a/lilia href='# '休闲裤/a/lilia href='# '牛仔裤/a/lilia href='# '免烫卡其裤/a/li/ul/li/ul/div/body/html