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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
react配置antd按需加载的使用
2019/02/11 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python对象与json相互转换的方法
2019/05/07 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
协商一致解除劳动合同协议书
2014/09/14 职场文书
岗位职责范本大全
2015/02/26 职场文书
单位考核聘任报告
2015/03/02 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
五一晚会主持词
2015/07/01 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers
windows系统安装配置nginx环境
2022/06/28 Servers
mysqldump进行数据备份详解
2022/07/15 MySQL