<!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. python-操作csv文件

    import csv lv,er=[],[] #读 with open('date.csv') as mycsv: reader=csv.DictReader(mycsv) for row in re ...

  2. wex5 教程 之 图文讲解 考题模块框架设计

    前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...

  3. JS变量、内存、作用域小结

    确保占用最少的内存可以让页面获得更好的性能,优化内存占用的最佳方式:为执行中的代码 只保存必要的数据.一旦数据不再有用,最好通过将其值置为null来释放其引用.适用于大多 数全局变量和全局对象的属性. ...

  4. LeetCode----172. Factorial Trailing Zeroes(Java)

    package singlenumber136; //Given an array of integers, every element appears twice except for one. F ...

  5. ［转］iOS学习之UINavigationController详解与使用(三)ToolBar

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682641 iOS学习之UINavigationController详解与使用(二)页面切 ...

  6. C# Cookie工具类

    /// <summary> /// Cookies赋值 /// </summary> /// <param name="strName">主键& ...

  7. 什么是 Help Desk？

    科技如何帮助公司发展,关键就在于保证IT系统的安全稳定运行.我们都知道要保证系统100%可用非常难实现,那么如何在系统故障时减少处置时间?一个有效的办法就是帮助台(Help Desk).那么什么是帮助 ...

  8. 在网上看到的一篇文章关于js和php编码的

    解决办法: 采用js对URL中的汉字进行escape编码. <a href="" onclick="window.open('product_list.php?p_ ...

  9. 《BI那点儿事》ETL中的关键技术

    ETL(Extract/Transformation/Load)是BI/DW的核心和灵魂,按照统一的规则集成并提高数据的价值,是负责完成数据从数据源向目标数据仓库转化的过程,是实施数据仓库的重要步骤. ...

  10. 转 一个典型的 C++ 程序员成长经历：

    1.  完整的学一遍 C++ 所有语言特性,典型书籍 "The C++ Programming Language" Part1, Part2, "C++ Primer&q ...