jQuery关于导航条背景切换效果实现示例


Posted in Javascript onSeptember 04, 2013

效果如下:
jQuery关于导航条背景切换效果实现示例 

<DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<meta charset="UTF-8"> 
<style> 
.nav{height:40px; width: 100%;background: #E6E6E6;} 
.nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;} 
.nav ul li a{text-decoration: none; display: block;width: 60px; text-align: center;} 
.onNav{font-weight: bold;color:#fff; background: #ccc;} 
</style> 
</head> 
<body> 
<div class="nav"> 
<ul> 
<li><a href="#" class="onNav">首页</a></li> 
<li><a href="#">博客</a></li> 
<li><a href="#">论坛</a></li> 
<li><a href="#">关于</a></li> 
<li><a href="#">联系</a></li> 
</ul> 
</div> 
<script type="text/javascript"> 
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ 
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) 
</script> 
</body> 
</html>

js部分:
<script type="text/javascript"> 
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ //找到a标签添加click事件,判断是否有背景存在 
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) //添加类并移除已有的类 
</script>

上面是一种方法,以下是另外一种:
<script type="text/javascript"> 
$(".nav ul li a").click(function(){ //找到a标签并添加click事件 
var inx = $(this).parent("li").index(); //定义变量inx,返回这个元素在同辈中的索引位置 
$(".nav ul li").find("a").removeClass("on_nav"); //移除已有的类 
$(".nav ul li").eq(inx).find("a").addClass("on_nav"); //获取点击元素并添加类 
</script>
Javascript 相关文章推荐
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 #Javascript
JS如何将UTC格式时间转本地格式
Sep 04 #Javascript
js 窗口抖动示例
Sep 04 #Javascript
js格式化货币数据实现代码
Sep 04 #Javascript
jQuery父级以及同级元素查找介绍
Sep 04 #Javascript
jquery 添加节点的几种方法介绍
Sep 04 #Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 #Javascript
You might like
PHP邮件专题
2006/10/09 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
python 计算文件的md5值实例
2017/01/13 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
绿色环保演讲稿
2014/05/10 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
抢劫罪辩护词
2015/05/21 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android