导航栏切换jquery
2013-10-03 19:49
681 查看
style.css
index.html
@charset "utf-8"; /* CSS Document */ *{padding:0px; margin:0px;} a{color:#00007F;text-decoration:none; color:#FFF; display:block;width:150px; height:30px; text-indent:14px; } ul,li{ list-style-type:none;} ul.menu{width:150px; margin:0 auto; margin-top:40px; background:#333;border-color:#000;border-style:solid;border-width:0px 1px 1px;} ul.menu li.level1 a.current{ background:#000;} ul.menu li.level1 a{background:#333; border-bottom:1px solid #FFF;} ul.menu li.level1 ul.level2{ display:none;} ul.menu li.level1 ul.level2 li a{ background:#FFF; color:#000;}
index.html
<ul class="menu"> <li class="level1"> <a class="current" href="#">衬衫</a> <ul class="level2"> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">短袖T-shirt</a></li> </ul> </li> <li class="level1"> <a href="#">卫衣</a> <ul class="level2"> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> <li><a href="#">运动卫衣</a></li> </ul> </li> <li class="level1"> <a style="border-bottom:0px;" href="#">裤子</a> <ul class="level2"> <li><a href="#">短裤</a></li> <li><a href="#">休闲裤</a></li> <li><a href="#">牛仔裤</a></li> </ul> </li> </ul>
$(".level1>a").click(function(){ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; });
相关文章推荐
- jquery定时滑出可最小化的底部提示层特效的代码
- jquery parent和parents的区别分析
- 一个例子探究jQuery的Ajax应用(二)
- 一个例子探究jQuery的Ajax应用(二)
- 一个例子探究jQuery的Ajax应用(一)
- 50个功能强大的jquery插件
- 横向纵向菜单制作 Jquery
- AJAX TAB JQUERY 选项卡 标签
- jQuery Notes-TicketManagerSystem
- 鼠标点击表格项就可以编辑 Jquery
- jQuery性能优化
- jQuery 2.0.3 源码分析 Deferred概念
- JQuery Basic Features Quick Walkthrough
- jquery checkbox全选与全不选
- 【JQuery】Differences among bind(), live(), delegare, on() and one()
- 简单的jquery效果
- jquery Ajax跨域调用
- [转]jquery getJSON 数据联动(采用序列化和反序列化获取数据) .
- 网站开发常用jQuery插件总结(十)菜单插件superfish
- 网站开发常用jQuery插件总结(九)侧边栏插件pageslide