jQuery实现导航栏头部菜单项点击后变换颜色的方法


Posted in jQuery onJuly 19, 2017

本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法。分享给大家供大家参考,具体如下:

实现效果如下:

jQuery实现导航栏头部菜单项点击后变换颜色的方法

jQuery实现导航栏头部菜单项点击后变换颜色的方法

话不多说直接上代码:

<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >直播</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a></li>
</ul>
<script src="jquery-1.7.2.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程序设计有所帮助。

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery实现提示语淡入效果
May 05 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
You might like
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
js的回调函数详解
2015/01/05 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
学习Vue组件实例
2018/04/28 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
2014年清明节寄语
2014/04/03 职场文书
校庆标语集锦
2014/06/25 职场文书
推普周活动总结
2014/08/28 职场文书
努力工作保证书
2015/02/28 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python