鼠标移到导航当前位置的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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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 神盾解密
2014/06/08 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python线程的两种编程方式
2015/04/14 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
.net工程师笔试题
2012/06/09 面试题
《两个铁球同时着地》教学反思
2014/02/13 职场文书
找工作求职信
2014/07/07 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2015年保管员工作总结
2015/04/30 职场文书
vue首次渲染全过程
2021/04/21 Vue.js