鼠标移到导航当前位置的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 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
React组件的三种写法总结
Jan 12 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 自定义装饰器实例详解
2019/07/20 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
护士自我鉴定
2013/10/23 职场文书
活动倡议书范文
2014/05/13 职场文书
工程项目经理任命书
2014/06/05 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2014年护理部工作总结
2014/11/14 职场文书
失职检讨书大全
2015/01/26 职场文书
经理岗位职责范本
2015/04/15 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python