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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2017-07-16

jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

jquery实现点击向下展开菜单项(伸缩导航)效果

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu

jquery实现无限分级横向导航菜单的方法

本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码 代码如下: (function($){     $.fn.extend({         droplinemenu: function(configs) {             var configs = $.extend({                                over: 200,                 o

Jquery实现带动画效果的经典二级导航菜单

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name

jQuery ui实现动感的圆角渐变网站导航菜单效果代码

本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes

jQuery仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></

jQuery实现的导航下拉菜单效果

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a hr

jQuery实现的简洁下拉菜单导航效果代码

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码

jQuery渐变发光导航菜单的实例代码

下面和大家分享一下具体的实现过程. HTML标签结构: 复制代码 代码如下: <ul class="animation_menu">     <li class="current">         <a href="#">菜单一<span>菜单一</span></a>     </li>     <li>         <a href=&qu

基于jquery实现导航菜单高亮显示(两种方法)

项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

Android 中Popwindow弹出菜单的两种方法实例

Android 中Popwindow弹出菜单的两种方法实例 1.popWindow就是对话框的一种方式! 此文讲解的android中对话框的一种使用方式,它叫popWindow. 2.popWindow的特性 Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于: AlertDialog的位置固定,而PopupWindow的位置可以随意. AlertDialog是非阻塞线程的,而PopupWindow是阻塞线程的. PopupWindow的位置按照有无偏

c# TreeView添加右键快键菜单有两种方法

一种就是使用TreeView的ContextMenuStrip属性,添加一个新ContextMenuStrip,这个方法非常的简答直接,缺点是右键菜单是整个控件响应的,也就是说即使没有右键选中节点也是会触发快捷菜单的显示 这种方法里获取哪一个的node选中是通过这个方法: 复制代码 代码如下: TreeNode curNode = this.trvFolder.GetNodeAt(e.X, e.Y) 另一种是创建ContextMenuStrip,并且使用TreeView的NodeMouseCli

ExtJs grid行 右键菜单的两种方法

在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

jQuery实现选项卡功能(两种方法)

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <title>JQuery 源码分析</title> <style> #div1 div{width

基于jQuery实现图片推拉门动画效果的两种方法

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

jQuery+ajax实现局部刷新的两种方法

在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

一.手风琴菜单效果图及代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果制作</title> <link rel="stylesheet" href="../css/reset.css"> <style> .con{ wi

django中使用jquery ajax post数据出现403错误的解决办法(两种方法)

在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;