`
aswang
  • 浏览: 845426 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery小例子-2 简单的导航条

 
阅读更多

 

<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>

 

效果截图:

 

jQuery简单导航菜单

  • 大小: 6.3 KB
分享到:
评论

相关推荐

    jquery插件库-jquery左侧导航滑动网页定位效果.zip

    这个压缩包“jquery插件库-jquery左侧导航滑动网页定位效果.zip”显然是关于一个jQuery插件,其核心功能是创建一个左侧导航,该导航在用户滚动页面时能够自动定位到相应的内容区域。 首先,让我们深入了解一下...

    jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705

    尽管现代网页设计已经较少使用Flash,但这个例子仍然是一个关于如何用jQuery创建交互式导航条的好教程,对于初学者理解网页动态效果的实现有一定帮助。同时,通过查看源码和相关图片,开发者可以学习到如何将静态...

    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检测滚动距离插件.zip

    这个“jQuery检测滚动距离插件”就是一个典型的例子,它为开发者提供了便捷的方式来监测和响应用户的滚动行为。 要使用这个插件,首先需要确保你的项目已经引入了jQuery库。然后,你可以通过下载并解压“jquery插件...

    jquery hover鼠标滑过动画导航条效果

    一个简单的导航条可能包含多个链接元素(`&lt;a&gt;`),这些元素通常被组织在无序列表(`&lt;ul&gt;`)中。例如: ```html &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;服务&lt;/a&gt;...

    jQuery导航条三级下拉菜单代码.zip

    在网页设计中,导航条是不可或缺的元素,它帮助用户快速定位并访问网站的不同部分。在本主题中,我们关注的是使用jQuery实现的三级下拉菜单代码。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及...

    jquery网站注册动态步骤导航条代码.zip

    总的来说,"jquery网站注册动态步骤导航条代码"提供了一个实用的工具,帮助开发者快速构建交互性强、用户体验良好的步骤导航条。通过学习和应用这个代码,不仅可以提升网站的专业感,还可以提高用户的注册转化率和...

    jquery hover鼠标滑过动画导航条.zip

    本资源"jquery hover鼠标滑过动画导航条.zip"提供了一种实现鼠标悬停(hover)时导航条动态效果的方法,它结合了CSS、JavaScript(主要是jQuery)以及HTML5技术。下面将详细介绍这个项目中的关键知识点。 1. **...

    jquery hover事件导航条.zip

    在这个例子中,`nav li`代表导航条中的列表项,`.dropdown`是与每个链接关联的浮动div层。通过添加和移除类名`active`,我们可以改变元素的样式,如改变背景色或边框。`stop()`函数用于停止当前正在运行的动画,避免...

    jquery分页例子(pager)

    例如,它可能会定义页码按钮的样式、选中状态的高亮效果以及分页导航条的整体布局。 3. **HTML模板**: `page.html`文件是展示分页功能的HTML页面模板。在这个文件中,开发者会插入必要的HTML结构来承载分页插件,...

    jQuery实现页面向下滚动后显示隐藏导航条

    在网页设计中,导航条是用户浏览网站时的重要指引元素,通常位于页面顶部。随着页面内容的增多,为了保持...通过不断实践和优化,你将更好地掌握jQuery实现页面向下滚动后显示隐藏导航条的技巧,提升你的前端开发技能。

    jQuery实现导航条穿梭特效

    本教程将详细介绍如何使用jQuery来实现一个动态的、具有穿梭动画特效的导航条,以提升用户体验。这个特效通常被称作“百度新闻风格”的导航条穿梭效果,特点是背景颜色随着鼠标悬停在各个导航项上时产生平滑的动画...

    jQuery仿flash导航条鼠标悬停上下文字滑动

    "jQuery仿flash导航条鼠标悬停上下文字滑动"是一种利用jQuery库实现的动态效果,旨在提升用户体验,使得导航条更加生动有趣。在这个项目中,我们将深入探讨这个效果的实现原理和相关技术。 首先,jQuery是一个广泛...

    JQ滑动变色菜单_导航条变色滑动显示

    "JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...

    jQuery 浅灰色、绿色相间的三级动态导航条

    【jQuery 浅灰色、绿色相间的三级动态导航条】是一种常见的网页设计元素,它利用JavaScript库jQuery实现,为用户提供互动性和美观的导航菜单。在网页布局中,导航条扮演着至关重要的角色,帮助用户轻松地浏览网站的...

    jQuery的滚动条事件插件jquery-waypoints

    这个插件允许开发者在网页滚动到特定元素时执行指定的函数,从而实现诸如淘宝商品页面评价导航条或微博的无限滚动效果。 **一、jQuery Waypoints的基本用法** 1. **安装与引入** 首先,你需要下载jQuery ...

    用jQuery实现定位滚动导航效果

    在网页设计中,导航栏是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。当网站内容较长,需要滚动浏览时,定位...学习这个例子,你可以深入理解jQuery如何与DOM交互以及如何利用它来增强网页的动态特性。

    html+jquery+CSS实现最简单的右侧导航栏效果

    在这个例子中,`#toggleButton`是触发导航栏显示/隐藏的按钮的ID,`toggleClass`方法会根据当前类是否存在来添加或移除该类。 最后,为了使导航栏在移动设备上更友好,我们可以添加媒体查询来调整布局: ```css @...

    jquery+css3圆角动画导航

    在本实例中,导航条的每个按钮都通过设置border-radius属性实现了圆润的外观,这使得整体设计更加现代且易于阅读。 接着,我们关注动画效果。CSS3的transition和transform属性是实现动态效果的关键。当鼠标悬停在...

    jquery浮动固定层导航条点击页面滚动到设置的描点位置

    在网页设计中,导航条是用户浏览网站时的重要指引,尤其在内容丰富的页面中,一个良好的导航条设计能提升用户体验。"jquery浮动固定层导航条点击页面滚动到设置的描点位置"是一个常见的功能,它涉及到jQuery库的使用...

Global site tag (gtag.js) - Google Analytics