鼠标移到导航当前位置的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获取父节点方法
Aug 20 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 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的安全
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
篝火晚会主持词
2014/03/25 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Golang Web 框架Iris安装部署
2022/08/14 Python