鼠标移到导航当前位置的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实现键盘方向键翻页功能的代码
Jun 03 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
JS跨域问题详解
Nov 25 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
webpack 处理CSS资源的实现
Sep 27 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学习之变量的使用
2011/05/29 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
py中的目录与文件判别代码
2008/07/16 Python
使用python实现省市三级菜单效果
2016/01/20 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
人民教师求职自荐信
2014/03/12 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
大学生英文求职信范文
2015/03/19 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python