<html>
<head>
<title>jQuery学习 第一部分</title>
<style type="text/css">
html,body{
font-size:13px;
}
#menu ul {
display:block;
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
width:100px;
text-align:center;
float:left;
line-height:35px;
color:#fff;
text-decoration:none;
background:url("images/menu-bg.jpg") repeat scroll 0 0 transparent;
}
#menu a.active{
background:url("images/menu-hover.jpg") repeat scroll 0 0 transparent;
color:#55486E;
}
#menu a.hover{
background:url("images/menu-hover.jpg") repeat scroll 0 0 transparent;
color:#55486E;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a class="active" href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">功能管理</a></li>
<li><a href="#">参数管理</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").each(function(){
$(this).click(function(){
if( ! $(this).hasClass("active") ){
$(".active").removeClass("active");
$(this).addClass("active");
}
});
$(this).hover(
function(e){
$(this).addClass("hover");
},
function(e){
$(this).removeClass("hover");
}
);
});
});
</script>
</body>
</html>
效果截图：
- 大小: 6.3 KB
分享到：
相关推荐
2.3 综合案例分析—导航条在项目中的应用/37 2.3.1 需求分析/37 2.3.2 效果界面/38 2.3.3 功能实现/38 2.3.4 代码分析/40 2.4 本章小结/41 第3章 jQuery操作DOM /42 3.1 DOM基础/43 3.2 访问元素/44 3.2.1...
23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式...
一个不错的jquery 导航条置顶的插件.
Scroll Detection用一种简单的方法来检测远程用户在你的网站上,在例子中用户在滚动页面到底部时显示下拉的导航条.演示地址：http://www.jq22.com/jquery-info558
在网上浏览了许多关于利用Jquery.TreeView插件生成树的例子！但是大多数都没有结合数据库来生成树，很难运用到实际项目中！
5.6.1 结合jquery与iui75 5.6.2 结合iui与webkit76 5.7 小结77 第6章 使用canvas开发web应用程序78 6.1 准备canvas78 6.1.1 启用canvas78 6.1.2 确保兼容性79 6.1.3 合并功能79 6.2 绘制路径80 ...
一个支持拖动的Ajax多级滚动菜单，有的菜单可运行于PHP环境中，自带有5个例子，运行本菜单后，点击带小三角的菜单项，会向左滚动显示出二级菜单，ajax功能基于jquery实现，使用时最好将jquery下载到本地测试。
2个目标文件，简单。 java模拟掷骰子2个 1个目标文件，输出演示。 java凭图游戏 一个目标文件，简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥 Java生成...
2个目标文件，简单。 java模拟掷骰子2个 1个目标文件，输出演示。 java凭图游戏 一个目标文件，简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥 Java生成...