<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			ul {

				list-style: none;

				padding: 0;

				margin: 0;

			}

			.menu li {

				background: gray;

				text-align: center;

				line-height: 30px;

				padding: 5px 10px;

				width: 50px;

				color: white;

				float: left;

				margin-right: 2px;

			}

			.menu li.tableIn {

				background-color: #003580;

				border: 1px solid #003580;

			}

			.menu:after {

				content: '';

				display: block;

				clear: both;

				overflow: hidden;

			}

			.content {

				display: block;

				background: #003580;

				width: 300px;

				height: 300px;

				color: white;

				padding: 5px 10px;

			}

			.defaut {

				display: none;

			}

			#load_menu li {

				float: left;

				padding: 3px 5px;

				color: blue;

				height: 30px;

				line-height: 30px;

				position: relative;

				z-index: 99;

			}

			#load_menu:after{

				content: '';

				display: block;

				clear: both;

				overflow: hidden;

			}

			#load_menu .load_tableIn {

				background: lightgray;

				border: 1px solid black;

				border-bottom: 0;

			}

			#load_content {

				width: 400px;

				height: 300px;

				background: lightgray;

				clear: both;

				border: solid 1px black;

				position: relative;

				top: -2px;

				padding-top: 30px;

			}

		</style>

		<script src="../jquery-2.2.4.min.js"></script>

		<script>

			$(window).load(function() {

				var timeOutID = null;

				$('.menu li').hover(function() {

					var me = $(this);

					//防止快速点击的方法。。。

					//注意保留timeID,不然无法清除

					//注意timeOut的第一个参数要写在本行

					timeOutID = setTimeout(function() {

						me.addClass('tableIn');

						var lis = $('.menu li');

						lis.each(function(index, value) {

							var contentDiv = $('.container').children('div').eq(index);

							//要转换为元素再等

							if (me.get(0) != value) {

								$(value).removeClass('tableIn');

								contentDiv.removeClass('content');

								contentDiv.addClass('defaut');

							} else {

								contentDiv.removeClass('defaut');

								contentDiv.addClass('content');

							}

						});

					}, 300);

				}, function() {

					clearTimeout(timeOutID);

				})

				//默认加载本地页面

				$('#load_content .real_content').load("testload.html");

				$('#load_menu li').on('click', function() {

					var me = $(this);

					//注意timeOut的第一个参数要写在本行

					me.addClass('load_tableIn');

					var lis = $('#load_menu li');

					lis.each(function(index, value) {

						var contentDiv = $('#load_content .real_content');

						//要转换为元素再等

						if (me.get(0) != value) {

							$(value).removeClass('load_tableIn');

						} else {

							if (index == 0) {

								contentDiv.load("testload.html");

							} else if (index == 1) {

								//这里没JSP，就没写了，也是用load方法

							} else if (index == 2) {

							}

						}

					});

				})

			});

		</script>

	</head>

	<body>

		<div class="container">

			<ul class="menu">

				<li class="tableIn">标签1</li>

				<li>标签2</li>

				<li>标签3</li>

			</ul>

			<div class="content">内容1</div>

			<div class="defaut">内容2</div>

			<div class="defaut">内容3</div>

		</div>

		<br />

		<br/>

		<ul id="load_menu">

			<li class="load_tableIn">加载完整页面</li>

			<li>加载部分JSP</li>

			<li>加载全部JSP</li>

		</ul>

		<div id="load_content">

			<div class="real_content"></div>

		</div>

	</body>

</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. imail 删除历史邮件命令

    删除旧的邮件(immsgexp.exe)Immsgexp.exe 可以让管理员删除指定天数的旧的邮件.基本语法 immsgexp -t startdirectory -d #of_days_to_sa ...

  2. 二、快速起步（Mysql镜像）

    1.登录镜像站点 docker login daocloud.io 用户名 密码 邮箱 1.1 拉取镜像 docker pull [option] name:[tag] 例如 docker pull ...

  3. ASP。net treeview xml

    this.TreeView2.ShowLines = false; //显示连接子节点与父节点之间的线条 TreeNodeBinding area = new TreeNodeBinding(); a ...

  4. ASP.NET多个Button的页面，回车执行按钮事件（转）

    主要有两种实现方法分别是:JavaScript的方法与Panel的方法 一.JavaScript的方法 ①单输入框(文本框)单按钮的实现方法 以下功能实现:在输入框中输入内容之后,按回车键就执行按钮事 ...

  5. python importlib

    api 文档 importlib.import_module(name, package=None) Import a module. The name argument specifies what ...

  6. Hibernate的关联映射——单向1-N关联

    Hibernate的关联映射--单向1-N关联 单向1-N关联的持久化类里需要使用集合属性.因为1的一端需要访问N的一端,而N的一端将以集合(Set)形式表现.从这个意义上来看,1-N(实际上还包括N ...

  7. 【Unity3D游戏开发】之利用语法糖添加自定义拓展方法(下) (十八)

    首先需要声明的是“语法糖”这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕不已,呵呵. 1．  ...

  8. ubuntu删除软件命令

    第一步,apt-get remove xxx :就是卸载xxx  或者 apt-get remove --purge xxx :卸载xxx并清除配置.   这两条命令对于依赖则是不管的.因为别的软件可 ...

  9. java高薪之路__002_异常处理

    自定义异常 package learn.JavaBasics.Class; import java.util.Date; /** * 如何自定义一个异常类 * 1. 继承一个现有的异常类 * 2. 提 ...

  10. RMAN的入门篇

    一.RMAN连接数据库 1.  连接本地数据库 [oracle@oracle hotbak]$ export oracle_sid=orcl [oracle@oracle hotbak]$ rman ...