<!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. Scala-Trait:混入与多态

    Scala 的 Trait 结合了抽象类与接口的能力,通过混入来获得灵活的多态能力. 代码如下所示: FileAbility 提供了读取文件.处理文件的能力, 其中继承一个空实现的 Trait:Lin ...

  2. JAVA基础知识之JDBC——编程步骤及执行SQL

    JDBC编程步骤 下面以mysql数据库为例, 1.加载驱动 首先需要下载数据库的驱动jar文件,并且在eclipse包中加入到class path中去, 例如mysql的驱动文件 mysql-con ...

  3. iOS开发中的内存分配（堆和栈）

    进程的内存分区 所有进程(执行的程序)都必须占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不一而不尽相同,有些内存是事先 ...

  4. oracle mysql sqlserver数据库中的分页

    oracle: select * from (select rownum r,t1.* from tablename t1 where rownum <M+N ) t2 where t2.r&g ...

  5. 。linux中swap分区

    1.swap分区的最重要的作用是防止网站流量突然增大而导致系统分配内存不够用而死机. 2.使用swap交换分区,会使服务器的性能降低很多,导致访问速度变慢. 3.交换分区.我们如果没有足够的内存,也许 ...

  6. php多维数组去除空元素

    在php中去除数组中的空值可以使用array_filter() 这个函数 但是这个函数只能对一维数组起作用,一旦需要对多维数组去空就不行了,而且去除的空也包括(int)0,(string)0,使用起来 ...

  7. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：为ASP.NET MVC应用程序创建更复杂的数据模型

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第六篇:为ASP.NET MVC应用程序 ...

  8. [转] 控制Arduino的利器-Windows Remote Arduino

    原文地址:控制Arduino的利器-Windows Remote Arduino 1. 概述 相信很多朋友已经在玩 Arduino了,而且一般都是使用官方的Arduino IDE来写程序控制Ardui ...

  9. php: 学习记录

    1.get_object_vars($obj) 获取对象$obj的属性数组 2.类和对象 <?php // 类和对象 echo "类和对象" . "\n" ...

  10. LTE Module User Documentation（翻译14）——Uplink Power Control（上行功率控制）

    LTE用户文档 (如有不当的地方,欢迎指正!) 20 Uplink Power Control(上行功率控制)   上行功率控制功能默认是开启的.用户可以通过设置布尔属性 ns3::LteUePhy: ...