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. mongodb 安装、开启服务 和 php添加mongodb扩展

    1.下载mongodb:https://www.mongodb.org/downloads#production  (https://www.mongodb.org/dl/win32) 2.安装.配置 ...

  2. python异常和错误(syntax errors 和 exceptions)

    语法错误 语法错误又被称解析错误 >>> for i in range(1..10):print(i) File "<stdin>", line 1 ...

  3. linux centos 6.5 运行MySQL Workbench 6.0找不到 libmysqlclient.so.16和libmysqlclient_r.so.16

    找到已安装mysql/lib目录下有类似文件: -rw-r--r-- root root 12月 : libmysqlclient.a lrwxrwxrwx root root 12月 : libmy ...

  4. 管道函数(%>%)很简单

    %>%来自dplyr包的管道函数,其作用是将前一步的结果直接传参给下一步的函数,从而省略了中间的赋值步骤,可以大量减少内存中的对象,节省内存 符号%>%,这是管道操作,其意思是将%> ...

  5. 提取data.frame中的部分数据（不含列标题和行标题）

    ?unlist     Given a list structure x, unlist simplifies it to produce a vector which contains all th ...

  6. ios设备相关

    设备方向 typedef NS_OPTIONS(NSUInteger, UIInterfaceOrientationMask) { UIInterfaceOrientationMaskPortrait ...

  7. 关于web2py外网访问，图形界面不显示等问题的解决办法

    首先系统版本是ubuntu 15.04,系统默认安装了两个版本的python, sudo python web2py.py 默认会调用python2.7版本来执行 会提示 pydo@planpls:/ ...

  8. CSS分页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. lamp centos虚拟主机配置

    1.基于不同端口的虚拟主机配置 [root@lamp~]# vi /etc/httpd/conf/httpd.conf Listen 80      #设置监听不同的虚拟主机需要使用的端口 Liste ...

  10. Android 四大组件之一(Activity)

    Activty的生命周期的也就是它所在进程的生命周期. 一个Activity的启动顺序: onCreate()——>onStart()——>onResume() 当另一个Activity启 ...