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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
jquery 插件学习(二)
Aug 06 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
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版
2006/10/09 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Django中处理出错页面的方法
2015/07/15 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python新手学习raise用法
2020/06/03 Python
python中实现栈的三种方法
2020/12/19 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
sort命令的作用和用法
2013/08/25 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
学校经典推荐信
2013/10/30 职场文书
车辆工程专业求职信
2014/06/14 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016年端午节寄语
2015/12/04 职场文书
教师教育心得体会
2016/01/19 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python