简单的jquery左侧导航栏和页面选中效果
2014-08-21 00:00
846 查看
这里是要实现导航的左侧并选中的,此功能需引用jquery
左侧导航:
左侧导航:
<div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >衬衫</a> <ul class="level2"> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖衬衫</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >长袖衬衫</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖T恤</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >长袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卫衣</a> <ul class="level2"> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >开襟卫衣</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >套头卫衣</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >运动卫衣</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >裤子</a> <ul class="level2"> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短裤</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >休闲裤</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >牛仔裤</a></li> <li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >免烫卡其裤</a></li> </ul> </li> </ul> </div> js代码: <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式 .next().hide(); //它们的下一个元素隐藏 return false; }); }); </script>
/* reset */ body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;} form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} input,select{font-size:12px;line-height:16px;} img{border:0;} ul,li{list-style-type:none;} a {color:#00007F;text-decoration:none;} a:hover {color:#bd0a01;text-decoration:underline;} .box { width: 150px; margin: 0 auto; } .menu{ overflow:hidden; border-color: #C4D5DF; border-style: solid; border-width: 0 1px 1px; } /* lv1 */ .menu li.level1 a{ display: block; height: 28px; line-height: 28px; background:#EBF3F8; font-weight:700; color: #5893B7; text-indent: 14px; border-top: 1px solid #C4D5DF; } .menu li.level1 a:hover{text-decoration:none;} .menu li.level1 a.current{background:#B1D7EF;} /* lv2 */ .menu li ul{overflow:hidden;} .menu li ul.level2{display:none;} .menu li ul.level2 li a{ display: block; height: 28px; line-height: 28px; background:#ffffff; font-weight:400; color: #42556B; text-indent: 18px; border-top: 0px solid #ffffff; overflow: hidden; } .menu li ul.level2 li a:hover{ color:#f60; }
<script type="text/javascript"> $(document).ready(function(){ $(".level2 a").each(function(){ $this = $(this); if($this[0].href==String(window.location)){ $this.addClass("hover"); } }); }); </script>
相关文章推荐
- 简单的jquery左侧导航栏和页面选中效果
- 简单的jquery左侧导航栏和页面选中
- jquery实现angular左侧导航栏,页面刷新仍选中
- jQuery实现手机版页面翻页效果的简单实例
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- JQUERY简单按钮轮换选中效果实现方法
- jQuery简单实现仿京东商城的左侧菜单效果代码
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 页面滚动选中左侧导航栏之HelloWorld
- 非常简单的固定页面头(比如导航栏)的小例子(Jquery模拟生成系列元素辅助查看效果)!
- JQuery页面随滚动条动态加载效果的简单实现(推荐)
- jQuery简单实现页面元素置顶时悬浮效果示例
- Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- jQuery简单实现导航栏根据滑动自动悬浮效果
- Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 一个简单的左侧导航栏滚动时悬浮效果
- jQuery简单实现仿京东商城的左侧菜单效果代码
- jQuery给跳转后页面的导航栏添加选中后样式