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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery实现动态创建form并提交的方法示例
May 27 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
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
brook javascript框架介绍
2011/10/10 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python自定义简单图轴简单实例
2018/01/08 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python I/O与进程的详细讲解
2019/03/08 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
详解python中index()、find()方法
2019/08/29 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python