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:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jquery validate demo 基础
Oct 29 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
javascript实现弹出层效果
Dec 10 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
Web应用开发TypeScript使用详解
May 25 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
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
详解node.js 事件循环
2020/07/22 Javascript
python2.7到3.x迁移指南
2018/02/01 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python3调用R的示例代码
2018/02/23 Python
python字符串判断密码强弱
2020/03/18 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
《挑山工》的教学反思
2014/02/16 职场文书
升学宴演讲稿
2014/09/01 职场文书
优秀员工事迹材料
2014/12/20 职场文书
离婚协议书格式范本
2016/03/18 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
vue实现在data里引入相对路径
2022/06/05 Vue.js