实现效果如下:

话不多说直接上代码:

<!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. .Net SSRS(rdlc) 报表经验总结

    排版 1. 可以利用表格来布局,以避免调整固定宽度的麻烦. 2. 一个表的表头里还可以嵌套表格. 3. 设置rdlc报表打印格式.首先打开RDLC报表设计器页面.在灰色部分点右键 -> 报表属性 ...

  2. MyGeneration 默认设置中没有数据库驱动

    这 个问题的出现基本上是因为MyGeneration 1.3需要的是 .Net framework 4.0,如果系统安装了 .Net 2.0的版本,安装程序执行的 regasm.exe为2.0版本下的 ...

  3. Java学习笔记--Java8 Lambda表达式

    Java Lambda表达式入门:http://blog.csdn.net/renfufei/article/details/24600507 lambda内容的介绍:http://swiftlet. ...

  4. ubuntu安装openssh-server

    openssh-server是依赖于openssh-clienr的,那ubuntu不是自带了openssh-client吗? 原因是自带的openssh-clien与所要安装的openssh-serv ...

  5. cf B. Jeff and Periods

    http://codeforces.com/contest/352/problem/B #include <cstdio> #include <cstring> #includ ...

  6. AzCopy – 跨帐户复制 Blob

    您可以随时从 aka.ms/AzCopy 下载最新版本. 去年4月发布的版本中的新增功能 支持跨帐户复制 Blob:AzCopy 允许您在相同存储帐户内或不同存储帐户之间复制 Blob(有关跨帐户 B ...

  7. JVM基础和调优（六）

    JVM设置过程中的一般的规范 在JVM的设置中,年轻代的设置比较的重要,因为年轻代存储空间分配的比较的块,可以说触发GC的机会比较的大. 默认的情况下:-XX:NewRatio  默认为2 说明:年轻 ...

  8. Android数据库信息显示在listview上

    Key Points: 1.使用SimpleCursorAdapter将Android数据库信息显示在listview上 adapter = new SimpleCursorAdapter(this, ...

  9. 负重前行的婚纱线上路 - i天下网商－最具深度的电商知识媒体

    负重前行的婚纱线上路 - i天下网商-最具深度的电商知识媒体 负重前行的婚纱线上路

  10. poj 1742 Coins（dp之多重背包+多次优化）

    Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar. ...