鼠标移到导航当前位置的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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
js表单验证实例讲解
Mar 31 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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
Symfony页面的基本创建实例详解
2015/01/26 PHP
php curl常用的5个经典例子
2017/01/20 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
javaScript基础详解
2017/01/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
node实现定时发送邮件的示例代码
2017/08/26 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python字典排序实例详解
2015/05/20 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python模块smtplib学习
2018/05/22 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
十八大闭幕感言
2014/01/22 职场文书
学生安全教育材料
2014/02/14 职场文书
《泉水》教学反思
2014/04/11 职场文书
考研经验交流会策划书
2015/11/02 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js