鼠标移到导航当前位置的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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
高效率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 header函数分析详解
2011/08/06 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
js实现的折叠导航示例
2013/11/29 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
深入理解Promise.all
2018/08/08 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
分享Python字符串关键点
2015/12/13 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
分享一个python的aes加密代码
2020/12/22 Python
一个入门级python爬虫教程详解
2021/01/27 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
促销活动总结怎么写
2014/06/25 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
redis中lua脚本使用教程
2021/11/01 Redis
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android