鼠标移到导航当前位置的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 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
Javascript中的arguments对象
Jun 20 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
vuex学习之Actions的用法详解
Aug 29 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
js实现微信聊天效果
Aug 09 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
js post提交调用方法
2014/02/12 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
python中函数传参详解
2016/07/03 Python
python使用tkinter实现简单计算器
2018/01/30 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
几道PHP的面试题
2012/05/19 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python