简单的jquery左侧导航栏和页面选中效果


Posted in Javascript onAugust 21, 2014

这里是要实现导航的左侧并选中的,此功能需引用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左侧导航栏和页面选中效果

Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 #Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 #Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 #Javascript
You might like
Laravel中Trait的用法实例详解
2016/03/16 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python help()函数用法详解
2014/03/11 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
深入理解Django的中间件middleware
2018/03/14 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python变量的存储原理详解
2019/07/10 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
幼师自我鉴定
2014/02/01 职场文书
安全标语大全
2014/06/10 职场文书
物业消防安全责任书
2014/07/23 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android