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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
javascript中的事件代理初探
Mar 08 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
使用js原生实现年份轮播选择效果实例
Jan 12 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中static静态变量的使用方法详解
2010/06/04 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
让焦点自动跳转
2006/07/01 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序实现搜索历史功能
2020/03/26 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
使用Python写个小监控
2016/01/27 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python实现数据图表
2017/07/29 Python
python变量的存储原理详解
2019/07/10 Python
Python如何将字符串转换为日期
2020/07/31 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
中学生期末评语
2014/02/03 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
医德医风个人总结
2015/02/28 职场文书
校园安全学习心得体会
2016/01/18 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android