鼠标移到导航当前位置的LI变色处于选中状态


Posted in Javascript onAugust 23, 2013

鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
<title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title> 
<style type="text/css"> 
ul,li{list-style:none;} 
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;} 
#nav li.h_nav_over{background:red;color:#fff;} 
#nav li.h_nav_over a{color:#fff;} 
a{text-decoration:none;} </style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#nav>ul>li").mouseover(function(){ 
$("#nav>ul>li").each(function(i){ 
$(this).removeClass("h_nav_over"); 
}); 
$(this).addClass("h_nav_over"); 
}).mouseout(function(){ 
$(this).addClass("h_nav_over"); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="nav"> 
<ul> 
<li><a href="#" >首页</a></li><li><a href="#" >品牌商机</a></li> 
<li><a href="#" >精品商机</a></li><li><a href="#" >最新商机</a></li> 
<li><a href="#" >投资考察会</a></li><li><a href="#" >在线交流区</a></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 #Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 #Javascript
jquery $.each() 使用小探
Aug 23 #Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 #Javascript
checkbox使用示例
Aug 23 #Javascript
You might like
php使用Cookie控制访问授权的方法
2015/01/21 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
生产部主管岗位职责
2014/01/06 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
法制宣传口号
2014/06/16 职场文书
学雷锋的心得体会
2014/09/04 职场文书
员工试用期自我评价
2014/09/18 职场文书
上课说话检讨书
2015/01/27 职场文书
工会文体活动总结
2015/05/07 职场文书
黑白记忆观后感
2015/06/18 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python