实现效果如下:

话不多说直接上代码:

<!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方面收藏的一点儿资料

    初来乍到,也算是第一次写技术类相关的博客,就分享几篇收藏的Linux相关的资料吧,希望可以给需要的人一点帮助. 1.<高级Bash脚本编程指南>:该网站详细讲解了Bash Shell编程的 ...

  2. ［转］一步步搭建Ubuntu环境——dpkg 被中断，您必须手工运行 sudo dpkg --configure -a 解决此问题——安装Flashplayer出错 ------不错

    原文网址:http://blog.csdn.net/xuezhimeng2010/article/details/8545261 解决方法如下: sudo rm /var/cache/apt/arch ...

  3. bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明

    Description A crime has been comitted: a load of grain has been taken from the barn by one of FJ's c ...

  4. PHP常用魔术方法（__toString魔术方法）

    <?php //文件名:index.php define('a',__DIR__); include '/IMooc/Loader.php'; spl_autoload_register('\\ ...

  5. poj 1486 Sorting Slides(二分图匹配的查找应用)

    Description Professor Clumsey is going to give an important talk this afternoon. Unfortunately, he i ...

  6. Javascript:一款简易的图片切换插件

    最近迷上javascript,每天不写点什么都不舒服哈~ 尽管自己能力有限,还是尽自己所能写点东西出来. 实现效果: 效果预览:http://codepen.io/anon/pen/BNjxXj 该插 ...

  7. python scrapy 基础

    scrapy是用python写的一个库,使用它可以方便的抓取网页. 主页地址http://scrapy.org/ 文档 http://doc.scrapy.org/en/latest/index.ht ...

  8. JMeter 参数化、检查点、集合点

      参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统. 这个时候就需要对用户名和密 ...

  9. 【转载】CocoaPods安装和使用教程

    转自:http://code4app.com/article/cocoapods-install-usage 目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaP ...

  10. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...