jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果


Posted in Javascript onAugust 22, 2015

本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果。分享给大家供大家参考。具体如下:

这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效。网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置。

运行效果如下图所示:

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>
<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.9.1.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
 $(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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

Javascript 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
vue.js循环radio的实例
Nov 07 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 #Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
express框架下使用session的方法
2019/07/31 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
对python多线程与global变量详解
2018/11/09 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
大学生就业自荐信
2013/10/26 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
校园活动策划书范文
2014/01/10 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
人事任命书范文
2014/06/04 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
周年庆典答谢词
2015/01/20 职场文书