<!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. linux查看磁盘系统df，du

    可以用df命令轻松地查看所有已挂载磁盘的使用情况 df df -h 把输出的文件单位换成文件可读的单位 du 命令显示特定目录的使用情况 du -c 显示总用量 du -h 人类可读性 du -s 每 ...

  2. php实现回复图文，图片，文字

      [代码]php代码: <?php /** 微信公众平台 开发者模式 默认用户输入任何文字,均返回同一个图文信息,链接地址为手机站; 可以根据变量$keyword,即用户输入的信息,进行判断, ...

  3. Prince2是怎么考试的？

    Prince2是怎么考试的? 在前几年,对于项目经理来讲关注的很多是单项目管理的工具技术模板,谈论最多的是,进度延期,成本超支,范围蔓延等等!有一个不成文的形态就是--去考个PMP吧!一时间PMP成为 ...

  4. js 获得日期相差天数

    function getDays(strDateStart,strDateEnd){               var strSeparator = "-"; //日期分隔符   ...

  5. Zero Copy

    原文出处: http://www.ibm.com/developerworks/library/j-zerocopy/ 传统的I/O 使用传统的I/O程序读取文件内容, 并写入到另一个文件(或Sock ...

  6. 使用nodewebx进行前后端开发环境分离

    下载nodewebx(windows环境) npm install nodewebx npm install inherits 为什么要下载inherits,因为nodewebx依赖它... 构建目录 ...

  7. 解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  8. day 2

    三目运算符 A?B:C 等价于 if(A) B; else C; 实例: int i: i=(3>2?5:1)  //如果3>2为真,i的值为5,否则为1 printf(“%d”,i): ...

  9. Hibernate <二级缓存>

    二级缓存: 定义: 1.二级缓存被称为进程级缓存或者sessionFactory级缓存,二级缓存可以被所有session共享 2.二级缓存的生命周期和sessionFactory生命周期一样(sess ...

  10. caffe中各层的作用:

    关于caffe中的solver: cafffe中的sover的方法都有: Stochastic Gradient Descent (type: "SGD"), AdaDelta ( ...