简单的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编程起步(第六课)
Jan 10 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
js验证框架实现代码分享
May 18 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
强制设为首页代码
2006/06/19 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
python print出共轭复数的方法详解
2019/06/25 Python
500行python代码实现飞机大战
2020/04/24 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
互动出版网:专业书籍
2017/03/21 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
公司应聘求职信
2014/06/21 职场文书
学校教研活动总结
2014/07/02 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android