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

效果如下

复制代码代码如下： DOCTYPE html头部脚本src=' http :http://代码。jquery。com/jquery-2。0 .3 .量滴js /脚本meta charset='UTF-8 '样式nav { height:40px宽度： 100%;背景技术： # E6E 6；} .导航左侧浮动：列表样式：无；右边距： 20px线高： 40px} .导航ul阿利{文本-装饰：无；显示器：块；宽度： 60px文本对齐：中心；} .onNav { font-weight : bold；color: # fff背景# CCC }/style/head body div class=' nav ' ul lia href=' # ' class=' onNav '首页/a/li lia href='# '博客/a/li lia href='# '论坛/a/li lia href='# '关于/a/li lia href='# '联系/a/li /ul /div脚本类型='text/javascript' $(' .阿利导航报)。单击(function(){if($(this)).has(' .onNav '){ $(这个).addClass('onNav ').父代('里').兄弟姐妹('里').查找(' a ').移除CLaSS(' OnNav ')；} })/脚本/正文/html js部分：复制代码代码如下：脚本类型='text/javascript' $(' .阿利导航报)。单击(function(){if($(this)).has(' .onNav '){//找到a标签添加点击事件，判断是否有背景存在$(这个)。addClass('onNav ').父代('里').兄弟姐妹('里').查找(' a ').移除CLaSS(' OnNav ')；}}) //添加类并移除已有的类/script上面是一种方法，以下是另外一种：复制代码代码如下：脚本类型='text/javascript' $(' .阿利导航报)。单击(函数(){ //找到a标签并添加点击事件var inx=$(this).父代('里').index()；//定义变量inx，返回这个元素在同辈中的索引位置$('.nav ul li ').查找(' a ').移除CLaSS(' on _ nav ')；//移除已有的类$('.nav ul li ').方程式(inx ).查找(' a ').添加CLaSS(' on _ nav ')；//获取点击元素并添加类/script