实现效果如下:

话不多说直接上代码:

<!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. 用js实现两个select下拉框之间的元素互相移动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Swift字符串的插入、删除和替换－备

    对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字符串. insert(_:atIndex:). ...

  3. Lintcode--009(单词切分）

    http://www.lintcode.com/zh-cn/problem/word-break/ 单词切分 给出一个字符串s和一个词典,判断字符串s是否可以被空格切分成一个或多个出现在字典中的单词. ...

  4. 编译cwm-recovery(含部分修改步骤)[转]

    1. 同步cm10.1的源码,具体操作请百度之-- 2. 打开终端,到源码目录下: cd Android/cm10.1                   //我的源码目录 3. 如果不想使用cm10 ...

  5. Linux环境下使用JFS文件系统

    Linux环境下使用JFS文件系统 JFS是IBM公司为linux系统开发的一个日志文件系统.从IBM的实力及它对Linux的态度来看,JFS应该是未来日志文件系统中最具实力的一个文件系统. JFS提 ...

  6. js深入研究之初始化验证

    <script type="text/javascript"> var Book = function(isbn, title, author) { if(!this. ...

  7. c#发送邮件样例

    1.通过gmail邮箱发送邮件 try { MailMessage mail = new MailMessage(); SmtpClient SmtpServer = new SmtpClient(& ...

  8. cf494A Treasure

    A. Treasure time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  9. java Color

    通过16进制颜色值获取颜色方法:Color.decode("#E0EEEE"); --后继续补充

  10. unity3d 学习笔记（一）

    操作:按下shit 点击坐标轴中心 切换透视图 动画烘焙的概念:相当于把原来的控制器动画或者IK(骨骼)动画所有塌陷为逐帧动画,导出的时候必须选这一项 着色器:从技术的角度来看,着色器是渲染器的一个部 ...