效果如下：

<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>

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. Objective-C 调用C++,C

    1. 建立一个C++类 2. 写一个Adaptor的Objective-C类 3. 在其他Objective-C的逻辑中调用Adaptor类. 1.C++类 // // CPlusPlusClass. ...

  2. [React] Set up React apps with zero configuration

    The React team has an official Command Line Interface (CLI) for building React projects called " ...

  3. 《RESTful Web Services》第二章 识别资源

    引言:开放RESTful Web服务的首要步骤之一是设计资源模型. 2.1 如何从领域名词中识别资源   2.2 如何选择资源粒度     一些因素会影响数据库表和对象模型的设计,例如领域建模.需要高 ...

  4. C#_Wpf_DataContex上下文整个类绑定

    <Window x:Class="UserStore.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2 ...

  5. c/c++将整数转换为字符串

    #include <iostream> using namespace std; int main(int argc, char **argv) { ; iint i,j; ],e[]; ...

  6. Android自定义标题TitleView

    Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需 ...

  7. SQL Server I/O 问题的诊断分

    一. SQL Server 什么时候和磁盘打交道: 1. SQL 需要访问的数据没有在Buffer pool中,第一次访问时需要将数据所在的页面从数据文件中读取到内存中.(只读) 2. 在insert ...

  8. nyoj 86 找球号(一）

    找球号(一) 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0& ...

  9. Windows服务定时运行，判断当前时间是否在配置时间段内

    /// <summary> /// 判断程序是否在设置运行时间内 /// </summary> /// <param name="startTime" ...

  10. js中 this篇

    以下文案皆来自<你不知道的JavaScript 上卷>——读书笔记摘要 this 到底是什么? 排除了一些错误理解之后,我们来看看 this 到底是一种什么样的机制. 之前我们说过 thi ...