<!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. .sh脚本判断判断某一变量是否为某一数值

    .sh脚本中,判断某一变量(例如:OEM_CUSTOMER_SUPPORT)是否为某一数值(例如:0),并根据条件做不同处理,写法如下: if [ $OEM_CUSTOMER_SUPPORT -eq  ...

  2. html与jsp

    1. 什么是 HTML 语言? HTML文件有什么特征? 答:HTML是超文本标记语言(Hypertext Mark-up Language)的缩写,主要用来创建与系统平台无关的网页文档.它是目前网络 ...

  3. 【SSO单点系列】（3）：CAS4.0 登录页验证码的添加

    2016.08.23 更新 注意:这个教程只适合4.0版本的,4.1以及以上的版本的已经不试用了, 后面几篇有人提到过 源码网盘链接更新了下 : 链接: http://pan.baidu.com/s/ ...

  4. EF生成实体模板改良

    也许介绍的方法并不是完美的解决方法 web工程里添加这两项 里面会生成两个模板文件 上下文模板和实体类模板,现在主要对实体类模板进行改良 1.讲using 放在文件头 <#=codeString ...

  5. easyui dialog 扩展load

    $.extend($.fn.panel.methods, { showMask: function(jq, msg){ return jq.each(function(){ var pal = $(t ...

  6. 【iOS】UIKit框架 学习笔记

    ... ...

  7. [问题2015S01] 复旦高等代数 II（14级）每周一题（第二教学周）

    [问题2015S01]  设 \(M_n(\mathbb{R})\) 是 \(n\) 阶实方阵全体构成的实线性空间, \(\varphi\) 是 \(M_n(\mathbb{R})\) 上的线性变换, ...

  8. JAVA 列表排序

    以前都通过Comparator进行排序,今天看到个例子,通过apache-common工具包进行排序,实现例子参考下面界面 http://blog.csdn.net/lizeyang/article/ ...

  9. mysql的初识--DOS下的简单命令

    DOS下进入 1.通过程序中的mySQL的:MySQL 5.6 Command Line Client直接进入mySQL的命令行: 2.或者通过WIn+R-->输入cmd,然后C:等一层一层找到 ...

  10. hdu4758Walk Through Squares(ac自动机+dp）

    链接 dp[x][y][node][sta] 表示走到在x,y位置node节点时状态为sta的方法数,因为只有2个病毒串,这时候的状态只有4种,根据可走的方向转移一下. 这题输入的是m.N,先列后行, ...