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中加载图片自适应大小主要实现代码
Aug 23 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
JQuery获得内容和属性方法解析
May 30 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
php xml文件操作代码(一)
2009/03/20 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Python实现针对中文排序的方法
2017/05/09 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python设计密码强度校验程序
2020/07/30 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
银行实习生自我鉴定范文
2013/09/19 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
爱护公物演讲稿
2014/09/09 职场文书
从事会计工作年限证明
2015/06/23 职场文书
同步小康驻村工作简报
2015/07/20 职场文书