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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python实现字符串格式化的方法小结
2017/02/20 Python
Python中存取文件的4种不同操作
2018/07/02 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
房地产广告策划方案
2014/05/15 职场文书
团日活动总结报告
2014/06/25 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android