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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
初识Node.js
Mar 20 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
phpcms中的评论样式修改方法
2016/10/21 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
一个超级简单的python web程序
2014/09/11 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python实现异步IO的示例
2020/11/05 Python
python压包的概念及实例详解
2021/02/17 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
元宵晚会主持词
2014/03/25 职场文书
英语教育专业自荐信
2014/05/29 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
小学生读书笔记范文
2015/06/30 职场文书
高中生物教学反思
2016/02/20 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
无线电知识基础入门篇
2022/02/18 无线电