实现效果如下:

话不多说直接上代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        a{

            text-decoration: none;

            color: black;

        }

        #menu{

            width: 100%;

            height: 20px;

            background: gainsboro;

        }

        ul li{

            list-style: none;

            float: left;

            padding-left: 20px;

            background-color: whitesmoke;

        }

        .active {

            color: white;

            background-color: black;

        }

        .none {

            background-color: whitesmoke;

        }

    </style>

</head>

<body>

<ul id="menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">直播</a></li>

    <li><a href="#">新闻</a></li>

    <li><a href="#">关于</a></li>

</ul>

<script src="../JQuery/js/jquery-3.0.0.min.js"></script>

<script>

    $('#menu li a').click(function () {

        var f = this;

        $('#menu li a').each(function () {

            this.className = this == f ? 'active' : 'none'

        });

    });

</script>

</body>

</html>

jquery实现导航栏头部点击变换颜色的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  4. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  5. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  6. ios 实现自定义状态栏StatusBar 和 导航栏navigationBar 的状态和颜色

    很多app中可以看到不同与导航栏的状态栏的颜色,他妈的真绕嘴. 一.更改状态栏颜色 (StatusBar) 就是比如导航栏是红色的状态栏是绿色的. 要实现这样的效果其实很简单,就是添加一个背景view ...

  7. Swift - 修改导航栏的样式（文字颜色，背景颜色，背景图片）

    默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...

  8. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  9. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

随机推荐

  1. linux内核学习之一：环境搭建--安装Debian7.3

    本系列文章假设读者已对linux有一定的了解,其实学习linux内核不需要有很深的关于linux的知识,只需要了解以下内容:linux基础知识及基本shell命令:现代操作系统的基本概念:C语言和gc ...

  2. css 设置字体

    CSS,font-family,好看常用的中文字体 例1(小米米官网):font-family: "Arial","Microsoft YaHei"," ...

  3. ubuntu配置android开发环境和编译源码遇到的一些问题

    ---------------------------------------------环境变量设置--------------------------------------------- 1.设 ...

  4. PSAM 卡的应用操作方法

    PSAM 卡的应用        PSAM 功能 终端安全存储模块        PASM  常用于 脱机交易的 安全认证        脱机交易的流程          1.卡片对持卡人的认证(防止 ...

  5. 在docker以FPM-PHP运行php，慢日志导致的BUG分析

    问题描述: 最近将IOS书城容器化,切换流量后.正常的业务测试了一般,都没发现问题.线上的错误监控系统也没有报警,以为迁移工作又告一段落了,暗暗的松了一口气.紧接着,报警邮件来了,查看发现是一个苹果支 ...

  6. 针对portmap 的DDOS攻击

    iptables -I INPUT -p tcp --dport 111 -j DROP iptables -I INPUT -s 10.171.254.221 -p tcp --dport 111 ...

  7. 3D打印论坛

    3D打印论坛:http://www.3done.cn http://www.03dp.com www.qjxxw.net/ http://www.3ddayin.net http://oa.zol.c ...

  8. bzoj4005[JLOI2015]骗我呢

    http://www.lydsy.com/JudgeOnline/problem.php?id=4005 神题~远距离orz 膜拜PoPoQQQ大神 #include<cstdio> #i ...

  9. MongoDB命令行操作

    本文专门介绍MongoDB的命令行操作.其实,这些操作在MongoDB官网提供的Quick Reference上都有,但是英文的,为了方便,这里将其稍微整理下,方便查阅. 这里用来做测试的是远端(10 ...

  10. Python字典的操作与使用

    字典的描述 字典是一种key-value的数据类型,使用就像我们上学用的字典,通过拼音(key)来查对应字的详细内容(value). 字典的特性 1.字典是无序的(不像列表一样有下标,它通过key来获 ...