实现效果如下:

话不多说直接上代码:

<!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. Lintcode--008(编辑距离）

    http://www.lintcode.com/en/problem/edit-distance/ 2016-08-29 给出两个单词word1和word2,计算出将word1 转换为word2的最少 ...

  2. TestNG使用Eclipse建立Test Case - 就是爱Java

    除了JUnit可以进行单元测试外,还可以使用TestNG来撰写Test Case,这是另一种测试Framework,它是为更广泛的测试场合而设计,可以运行在没有修改过的JUnit测试,除非看到它们的i ...

  3. DOCKER功能练习

    都是书上的示例,慢慢进入..

  4. POJ 1225 Substrings

    http://poj.org/problem?id=1226 题意:给定n个串.求一个最长的串,使得这个串或者其反串在每个串中都出现过? 思路:先在大串里面加入正反串,然后二分,判定即可. #incl ...

  5. sql server 2000 下载地址

    sql  server 2000 下载地址 http://pan.baidu.com/share/link?shareid=146152&uk=1225012539

  6. tyvj1039忠诚2

    描述 Description 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨, ...

  7. debuggap，移动端调试新方式

    最近发现了一个移动端调试的新技能,这里简单描述一下基本情况. 移动端调试常遇到的问题 手机访问只能看到页面的展现,除此之外看不到任何其他信息 无法像调试PC页面那么方便的查看js.dom.networ ...

  8. c语言局部变量 静态局部变量 全局变量与静态全局变量

    基本概念: 作用域:起作用的区域,也就是可以工作的范围. 代码块:所谓代码块,就是用{}括起来的一段代码. 数据段:数据段存的是数,像全局变量就是存在数据段的 代码段:存的是程序代码,一般是只读的. ...

  9. Hive MapJoin

    摘要 MapJoin是Hive的一种优化操作,其适用于小表JOIN大表的场景,由于表的JOIN操作是在Map端且在内存进行的,所以其并不需要启动Reduce任务也就不需要经过shuffle阶段,从而能 ...

  10. HLS直播和时移项目上线

    兄弟姐妹们: 天翼视讯的高清HLS直播和时移项目上线,测试观看地址为:http://118.85.192.228/live/,同时支持移动终端和pc终端.移动终端支持ios client和androi ...