鼠标移到导航当前位置的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 (十) jQueryUI常用功能实战
Feb 23 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
原生JavaScript实现todolist功能
Mar 02 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP开发文件系统实例讲解
2006/10/09 PHP
php合并js请求的例子
2013/11/01 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
jQuery的框架介绍
2016/05/11 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
vue实现记事本功能
2019/06/26 Javascript
详解vue 组件
2020/06/11 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python计算一个序列的平均值的方法
2015/07/11 Python
python实现xlsx文件分析详解
2018/01/02 Python
python如何从文件读取数据及解析
2019/09/19 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
公司寄语大全
2014/04/10 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
Python制作春联的示例代码
2022/01/22 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技