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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
javascript 节点遍历函数
Mar 28 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
处理canvas绘制图片模糊问题
May 11 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
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Vue程序调试的方法
2019/06/17 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
使用python实现生成用户信息
2017/03/20 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python与字符编码问题
2019/05/24 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
十佳青年事迹材料
2014/08/21 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
场地使用证明模板
2014/10/25 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
实习推荐信格式模板
2015/03/27 职场文书
比赛口号霸气押韵
2015/12/24 职场文书