1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<style>
  8. 			ul {
  9. 				list-style: none;
  10. 				padding: 0;
  11. 				margin: 0;
  12. 			}
  13.  
  14. 			.menu li {
  15. 				background: gray;
  16. 				text-align: center;
  17. 				line-height: 30px;
  18. 				padding: 5px 10px;
  19. 				width: 50px;
  20. 				color: white;
  21. 				float: left;
  22. 				margin-right: 2px;
  23. 			}
  24.  
  25. 			.menu li.tableIn {
  26. 				background-color: #003580;
  27. 				border: 1px solid #003580;
  28. 			}
  29.  
  30. 			.menu:after {
  31. 				content: '';
  32. 				display: block;
  33. 				clear: both;
  34. 				overflow: hidden;
  35. 			}
  36.  
  37. 			.content {
  38. 				display: block;
  39. 				background: #003580;
  40. 				width: 300px;
  41. 				height: 300px;
  42. 				color: white;
  43. 				padding: 5px 10px;
  44. 			}
  45.  
  46. 			.defaut {
  47. 				display: none;
  48. 			}
  49.  
  50. 			#load_menu li {
  51. 				float: left;
  52. 				padding: 3px 5px;
  53. 				color: blue;
  54. 				height: 30px;
  55. 				line-height: 30px;
  56. 				position: relative;
  57. 				z-index: 99;
  58. 			}
  59.  
  60. 			#load_menu:after{
  61. 				content: '';
  62. 				display: block;
  63. 				clear: both;
  64. 				overflow: hidden;
  65. 			}
  66.  
  67. 			#load_menu .load_tableIn {
  68. 				background: lightgray;
  69. 				border: 1px solid black;
  70. 				border-bottom: 0;
  71. 			}
  72.  
  73. 			#load_content {
  74. 				width: 400px;
  75. 				height: 300px;
  76. 				background: lightgray;
  77. 				clear: both;
  78. 				border: solid 1px black;
  79. 				position: relative;
  80. 				top: -2px;
  81. 				padding-top: 30px;
  82. 			}
  83. 		</style>
  84. 		<script src="../jquery-2.2.4.min.js"></script>
  85. 		<script>
  86. 			$(window).load(function() {
  87. 				var timeOutID = null;
  88. 				$('.menu li').hover(function() {
  89. 					var me = $(this);
  90. 					//防止快速点击的方法。。。
  91. 					//注意保留timeID,不然无法清除
  92. 					//注意timeOut的第一个参数要写在本行
  93. 					timeOutID = setTimeout(function() {
  94. 						me.addClass('tableIn');
  95. 						var lis = $('.menu li');
  96.  
  97. 						lis.each(function(index, value) {
  98. 							var contentDiv = $('.container').children('div').eq(index);
  99. 							//要转换为元素再等
  100. 							if (me.get(0) != value) {
  101. 								$(value).removeClass('tableIn');
  102. 								contentDiv.removeClass('content');
  103. 								contentDiv.addClass('defaut');
  104. 							} else {
  105. 								contentDiv.removeClass('defaut');
  106. 								contentDiv.addClass('content');
  107. 							}
  108. 						});
  109. 					}, 300);
  110. 				}, function() {
  111. 					clearTimeout(timeOutID);
  112. 				})
  113. 				//默认加载本地页面
  114. 				$('#load_content .real_content').load("testload.html");
  115.  
  116. 				$('#load_menu li').on('click', function() {
  117. 					var me = $(this);
  118. 					//注意timeOut的第一个参数要写在本行
  119. 					me.addClass('load_tableIn');
  120. 					var lis = $('#load_menu li');
  121.  
  122. 					lis.each(function(index, value) {
  123. 						var contentDiv = $('#load_content .real_content');
  124. 						//要转换为元素再等
  125. 						if (me.get(0) != value) {
  126. 							$(value).removeClass('load_tableIn');
  127. 						} else {
  128. 							if (index == 0) {
  129. 								contentDiv.load("testload.html");
  130. 							} else if (index == 1) {
  131. 								//这里没JSP，就没写了，也是用load方法
  132. 							} else if (index == 2) {
  133.  
  134. 							}
  135. 						}
  136. 					});
  137. 				})
  138. 			});
  139. 		</script>
  140. 	</head>
  141.  
  142. 	<body>
  143. 		<div class="container">
  144. 			<ul class="menu">
  145. 				<li class="tableIn">标签1</li>
  146. 				<li>标签2</li>
  147. 				<li>标签3</li>
  148. 			</ul>
  149. 			<div class="content">内容1</div>
  150. 			<div class="defaut">内容2</div>
  151. 			<div class="defaut">内容3</div>
  152.  
  153. 		</div>
  154. 		<br />
  155. 		<br/>
  156. 		<ul id="load_menu">
  157. 			<li class="load_tableIn">加载完整页面</li>
  158. 			<li>加载部分JSP</li>
  159. 			<li>加载全部JSP</li>
  160. 		</ul>
  161. 		<div id="load_content">
  162. 			<div class="real_content"></div>
  163. 		</div>
  164. 	</body>
  165.  
  166. </html>

　　

jQuery 菜单项切换的更多相关文章

  1. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. TortoiseSVN菜单项功能说明

    TortoiseSVN是windows下其中一个非常优秀的SVN客户端工具.通过使用它,我们可以可视化的管理我们的版本库.不过由于它只是一个客户端,所以它不能对版本库进行权限管理. TortoiseS ...

  3. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  4. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  5. Android菜单项内容大全

    一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...

  6. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  7. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  8. 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)

    @color 0A @title 添加系统右键菜单项 管理员取得所有权(^&W)(带盾牌) by wjshan0808 @echo off echo * >nul reg add HKC ...

  9. SharePoint 2013:自定义ECB菜单项的添加

    本文分别介绍了两种常用的添加ECB菜单项的方式. 声明式创建 这也是微软最佳实践推荐的方式.在VS中创建一个SharePoint空解决方案,并添加一个“空元素”类型的SPI. 在Elements.xm ...

随机推荐

  1. 利用a标签特性解析地址(附加属性说明)

    首先我们看看实例 a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host); 控制台会输出 "www.cnblogs.c ...

  2. php中rsa加密解密验证

    RSA非对称加密,对敏感的数据传输进行数据加密.验证等.测试环境:wamp.aliyun虚拟主机(lamp)一.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以).下载生 ...

  3. .naturalWidth 和naturalHeight属性，

    在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为 .naturalWidth 和naturalHeight属性,例子如下: var rw = myimage.naturalWidt ...

  4. nginx 设置 fastcgi缓存

    #增加调试信息 add_header X-Cache-CFC "$upstream_cache_status - $upstream_response_time"; fastcgi ...

  5. IOS 键盘 禁止输入字母

    在开发中有时候需要数字键盘,但是设置textfield为默认数字键后, 在模拟器上如果用电脑键盘仍然可以输入字母, 在真机上如果使用搜狗等其他输入法也可能会出现可以输入字母的情况.解决方法如下,在te ...

  6. Lost Cows(线段树 POJ2182)

    Lost Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10354 Accepted: 6631 Descriptio ...

  7. codeforces VK cup 2016-round 1 D.Bear and Contribution

    题意大概就是有n个数字,要使至少有k个相同,可以花费b使一个数+5,可以花费c使一个数+1,求最小花费. 要对齐的数肯定是在[v,v+4]之间,所以分别枚举模为0~4的情况就可以了. 排序一下,然后化 ...

  8. R实战之热点图（HeatMap)

    快速实现是搜索帮助文档的首要目的,所以此处涉及实战的文章一概略去传统帮助文档的理论部分,直接上代码加注释! 本文将介绍R语言下利用ggplot2包制作heatmap的代码 -------------- ...

  9. HTML布局与框架

    HTML块 HTML块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> <!DOCTYPE html> <html> ...

  10. cellery ImportError & AttributeError

    一.zz的问题 celery 运行work要进入到 文件所在的文件夹下执行 二.AttributeError: 'Flask' object has no attribute 'user_option ...