效果如下：

  1. <DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  5.         <meta charset="UTF-8">
  6.         <style>
  7.         .nav{height:40px; width: 100%;background: #E6E6E6;}
  8.         .nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;}
  9.         .nav ul li a{text-decoration: none; display: block;width: 60px; text-align: center;}
  10.         .onNav{font-weight: bold;color:#fff; background: #ccc;}
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div class="nav">
  15.             <ul>
  16.                 <li><a href="#" class="onNav">首页</a></li>
  17.                 <li><a href="#">博客</a></li>
  18.                 <li><a href="#">论坛</a></li>
  19.                 <li><a href="#">关于</a></li>
  20.                 <li><a href="#">联系</a></li>
  21.             </ul>
  22.         </div>
  23.         <script type="text/javascript">
  24.             $(".nav ul li a").click(function(){if($(this).has(".onNav")){
  25.             $(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}})
  26.         </script>
  27.     </body>
  28. </html>

js部分：

  1. <script type="text/javascript">
  2. $(".nav ul li a").click(function(){if($(this).has(".onNav")){   //找到a标签添加click事件，判断是否有背景存在
  3. $(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}})   //添加类并移除已有的类
  4. </script>

上面是一种方法，以下是另外一种：

  1. <script type="text/javascript"> 
    $(".nav ul li a").click(function(){   //找到a标签并添加click事件
  2. var inx = $(this).parent("li").index();  //定义变量inx,返回这个元素在同辈中的索引位置
  3.  $(".nav ul li").find("a").removeClass("on_nav");  //移除已有的类
  4.  $(".nav ul li").eq(inx).find("a").addClass("on_nav");  //获取点击元素并添加类
    </script>

jQuery关于导航条背景切换的更多相关文章

  1. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  3. vuejs导航条动态切换active状态

    用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下 ...

  4. Jquery | 基础 | 导航条在项目中的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 利用jquery.backstretch插件，背景切换

    //首页自动更换背景特效开始============================================1.引用文件<script src="jquery.js" ...

  6. jQuery控制导航条样式

    原理:点击当前元素时,当前元素添加(样式类),父辈的兄弟姐妹的孩子('a')去掉此样式类. 代码如下: /*次要导航*/ $(".subnav li a").click(funct ...

  7. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. 【iOS开发-22】navigationBar导航条和navigationItem设置：基本搞定导航条上的文字和按钮以及各种跳转

    http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral (1 ...

随机推荐

  1. C# 设置 窗口最大化

    Main.WindowState = FormWindowState.Maximized;

  2. 看原理图之UART

    UART原理 协议类之间的通信就跟人之间交流一样,要遵守一定的原则:1.你说的话别人得听得懂,不能有语言障碍:2.你不能说的太快,别人都来不及反应. 对上面的话用专业点的语句描述下就是: 1.双方约定 ...

  3. cocos 3.0 一键打包android平台应该注意的细节

    cocos2d-x 移植越来越便捷,走到cocos2d-x-3.0rc2,能够说移植已经非常完好了,我们仅仅要进行适当的适配,cocos能够直接帮助我们生成apk 我网络不好无法上传图片:(无图无捷豹 ...

  4. android学习日记08--Paint画笔

    Paint 要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布Canvas上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设 ...

  5. Win7无线网络共享设置方法

    http://jingyan.baidu.com/article/4f34706e89bb2ae387b56d0b.html

  6. MySql安装步骤详解，MySql的root密码设置，启动MySql服务。

    1.下载mysql安装包,并解压,双击mysql-5.6.24-winx64.msi 2.点击下一步 3.选择custom 4.选择安装内容和位置,5个安装内容要选择will be installed ...

  7. WebSocket实时异步通信

    WebSocket实时异步通信 [一]WebSocket简介 WebSocket是HTML5推出一个协议规范,用来B/S模式中服务器端和客户端之间进行实时异步通信. 众所周知,传统的HTTP协议中,服 ...

  8. linux 远程工具

    SecureCRT SecureCRT官网地址:http://www.vandyke.com/products/securecrt/ Xmanager官方网址:http://www.netsarang ...

  9. RabbitMQ 原文译03--发布和订阅

    发布/订阅 在之前的案例中我们创建了一个工作队列,这个工作队列的实现思想就是一个把每一个任务平均分配给每一个执行者,在这个篇文章我们会做一些不一样的东西,把一个消息发送给多个消费者,这种模式就被称作& ...

  10. C#3.0 集合

    实现IEnumerable<T>伴随一个迭代: public class MyGenCollection : IEnumerable<int> { int[] data = { ...