鼠标移到导航当前位置的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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
Javascript 之封装(Package)
Sep 14 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
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python基础教程之缩进介绍
2014/08/29 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python面向对象之继承代码详解
2018/01/29 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python中pdb模块实例用法
2021/01/15 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
法学专业个人求职信
2013/09/26 职场文书
中考标语大全
2014/06/05 职场文书
服务行业演讲稿
2014/09/02 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
SSM VUE Axios详解
2021/10/05 Vue.js
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers