鼠标移到导航当前位置的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 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 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
PHP的历史和优缺点
2006/10/09 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
extjs render 用法介绍
2013/09/11 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
创业计划书如何编写
2014/02/06 职场文书
工程采购员岗位职责
2014/03/09 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
企业年检委托书范本
2014/10/14 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python