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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
使用webpack打包koa2 框架app
Feb 02 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP中的类型约束介绍
2015/05/11 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
Javascript注入技巧
2007/06/22 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
python三元运算符实现方法
2013/12/17 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python中threading开启关闭线程操作
2020/05/02 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
数据库方面面试题
2012/04/22 面试题
洗发水广告词
2014/03/13 职场文书
学校捐款活动总结
2015/05/09 职场文书
大学开学感言
2015/08/01 职场文书
初一数学教学反思
2016/02/17 职场文书