<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
分享到:
相关推荐
这个压缩包“jquery插件库-jquery左侧导航滑动网页定位效果.zip”显然是关于一个jQuery插件,其核心功能是创建一个左侧导航,该导航在用户滚动页面时能够自动定位到相应的内容区域。 首先,让我们深入了解一下...
尽管现代网页设计已经较少使用Flash,但这个例子仍然是一个关于如何用jQuery创建交互式导航条的好教程,对于初学者理解网页动态效果的实现有一定帮助。同时,通过查看源码和相关图片,开发者可以学习到如何将静态...
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...
这个“jQuery检测滚动距离插件”就是一个典型的例子,它为开发者提供了便捷的方式来监测和响应用户的滚动行为。 要使用这个插件,首先需要确保你的项目已经引入了jQuery库。然后,你可以通过下载并解压“jquery插件...
一个简单的导航条可能包含多个链接元素(`<a>`),这些元素通常被组织在无序列表(`<ul>`)中。例如: ```html <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a>...
在网页设计中,导航条是不可或缺的元素,它帮助用户快速定位并访问网站的不同部分。在本主题中,我们关注的是使用jQuery实现的三级下拉菜单代码。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及...
总的来说,"jquery网站注册动态步骤导航条代码"提供了一个实用的工具,帮助开发者快速构建交互性强、用户体验良好的步骤导航条。通过学习和应用这个代码,不仅可以提升网站的专业感,还可以提高用户的注册转化率和...
本资源"jquery hover鼠标滑过动画导航条.zip"提供了一种实现鼠标悬停(hover)时导航条动态效果的方法,它结合了CSS、JavaScript(主要是jQuery)以及HTML5技术。下面将详细介绍这个项目中的关键知识点。 1. **...
在这个例子中,`nav li`代表导航条中的列表项,`.dropdown`是与每个链接关联的浮动div层。通过添加和移除类名`active`,我们可以改变元素的样式,如改变背景色或边框。`stop()`函数用于停止当前正在运行的动画,避免...
例如,它可能会定义页码按钮的样式、选中状态的高亮效果以及分页导航条的整体布局。 3. **HTML模板**: `page.html`文件是展示分页功能的HTML页面模板。在这个文件中,开发者会插入必要的HTML结构来承载分页插件,...
在网页设计中,导航条是用户浏览网站时的重要指引元素,通常位于页面顶部。随着页面内容的增多,为了保持...通过不断实践和优化,你将更好地掌握jQuery实现页面向下滚动后显示隐藏导航条的技巧,提升你的前端开发技能。
本教程将详细介绍如何使用jQuery来实现一个动态的、具有穿梭动画特效的导航条,以提升用户体验。这个特效通常被称作“百度新闻风格”的导航条穿梭效果,特点是背景颜色随着鼠标悬停在各个导航项上时产生平滑的动画...
"jQuery仿flash导航条鼠标悬停上下文字滑动"是一种利用jQuery库实现的动态效果,旨在提升用户体验,使得导航条更加生动有趣。在这个项目中,我们将深入探讨这个效果的实现原理和相关技术。 首先,jQuery是一个广泛...
"JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...
【jQuery 浅灰色、绿色相间的三级动态导航条】是一种常见的网页设计元素,它利用JavaScript库jQuery实现,为用户提供互动性和美观的导航菜单。在网页布局中,导航条扮演着至关重要的角色,帮助用户轻松地浏览网站的...
这个插件允许开发者在网页滚动到特定元素时执行指定的函数,从而实现诸如淘宝商品页面评价导航条或微博的无限滚动效果。 **一、jQuery Waypoints的基本用法** 1. **安装与引入** 首先,你需要下载jQuery ...
在网页设计中,导航栏是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。当网站内容较长,需要滚动浏览时,定位...学习这个例子,你可以深入理解jQuery如何与DOM交互以及如何利用它来增强网页的动态特性。
在这个例子中,`#toggleButton`是触发导航栏显示/隐藏的按钮的ID,`toggleClass`方法会根据当前类是否存在来添加或移除该类。 最后,为了使导航栏在移动设备上更友好,我们可以添加媒体查询来调整布局: ```css @...
在本实例中,导航条的每个按钮都通过设置border-radius属性实现了圆润的外观,这使得整体设计更加现代且易于阅读。 接着,我们关注动画效果。CSS3的transition和transform属性是实现动态效果的关键。当鼠标悬停在...
在网页设计中,导航条是用户浏览网站时的重要指引,尤其在内容丰富的页面中,一个良好的导航条设计能提升用户体验。"jquery浮动固定层导航条点击页面滚动到设置的描点位置"是一个常见的功能,它涉及到jQuery库的使用...