jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】


Posted in Javascript onSeptember 21, 2016

本文实例讲述了jQuery实现点击后高亮背景固定显示的菜单效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现点击后高亮背景的菜单特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font:normal 14px/24px 'MicroSoft YaHei';}
.cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;}
.cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;}
.cotrs a:hover{ text-decoration:none; background:#000;}
.cotrs a.thisclass{text-decoration:none; background:#000;}
</style>
</head>
<body>
<br><br><br>
<div class="cotrs">
<a href='javascript:' class="thisclass">首页</a>
<a href='javascript:'>菜单导航</a>
<a href='javascript:'>时间日期</a>
<a href='javascript:'>焦点图</a>
<a href='javascript:'>tab标签</a>
<a href='javascript:'>jquery特效</a>
<a href='javascript:'>在线客服</a>
<a href='javascript:'>广告代码</a>
<a href='javascript:'>相册代码</a>
<a href='javascript:'>图片特效</a>
<a href='javascript:'>名站特效</a>
<a href='javascript:'>其他代码</a>
<a href='javascript:'>HTML5</a>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
  $(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】

完整实例代码点击此处本站下载

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

Javascript 相关文章推荐
解析jquery获取父窗口的元素
Jun 26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
使用js实现数据格式化
Dec 03 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Angular2 (RC5) 路由与导航详解
Sep 21 #Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #Javascript
AngularJS 单元测试(二)详解
Sep 21 #Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 #Javascript
AngularJS 单元测试(一)详解
Sep 21 #Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 #Javascript
AngularJS  ng-table插件设置排序
Sep 21 #Javascript
You might like
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python 元类使用说明
2009/12/18 Python
python实现验证码识别功能
2018/06/07 Python
如何通过python画loss曲线的方法
2019/06/26 Python
简单了解python中对象的取反运算符
2019/07/01 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
师范生见习报告范文
2014/11/03 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
Java实现简单小画板
2022/06/10 Java/Android