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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
vue百度地图 + 定位的详解
May 13 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
js仿京东放大镜效果
Aug 09 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php命名空间学习详解
2014/02/27 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
javascript回调函数详解
2018/02/06 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python切片用法实例教程
2014/09/08 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python利用opencv实现颜色检测
2021/02/23 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
新学期开学寄语
2014/01/18 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
企业2014年度工作总结
2014/12/10 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis