页面HTML如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery_Study_Tab</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<link rel="stylesheet" type="text/css" href="css/tab.css">
</head>
<body>
<ul id="tabfirst">
<li class="tabin">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div class="contentfirst contentin">内容1</div>
<div class="contentfirst">内容2</div>
<div class="contentfirst">内容3</div>
<br/>
<br/>
<br/>
<ul id="tabsecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond">
<img src="images/img-loading.gif" alt="数据加载中！">
<div id="realContent"></div>
</div>
</body>
</html>
css样式如下：
ul,li {
list-style: none;
text-align: center;
font-size: 12px;
}
ul {
padding: 10px;
margin: 0px;
}
#tabfirst li {
float:left;
background-color:#868686;
color:white;
padding:5px;
margin-right:2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color:#6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
/**
* clear：该属性的值指出了不允许有浮动对象的边
* none：允许两边都可以有浮动对象 both：不允许有浮动对象
* left：不允许左边有浮动对象 right：不允许右边有浮动对象
**/
clear:left;
background-color:#6E6E6E;
color:white;
width:400px;
height:100px;
padding:10px;
display:none;
}
div.contentin {
/**
* display block：CSS1块对象的默认值。用该值为对象之后添加新行
**/
display:block;
}
#tabsecond li {
float:left;
background-color: white;
color:blue;
padding:5px;
margin-right:2px;
/**
* cursor：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
**/
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
/**
* z-index：检索或设置对象的层叠顺序。
**/
z-index:100;
/**
* position：检索对象的定位方式。
* static：无特殊定位，对象遵循HTML定位规则
* absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
* relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
* fixed：IE5.5及NS6尚不支持此属性
**/
position:relative;
}
#contentsecond {
width: 500px;
height: 140px;
padding: 10px;
background-color: #F2F6FB;
clear:left;
border: 1px solid black;
position:relative;
top:-1px;
}
img {
display: none;
}
js代码：
$(document).ready(function(){
/*
//找到所有的标签
$("li").mouseover(function(){
$("div.contentin").hide();
}).mouseout(function(){
});
*/
$("#tabfirst li").each(function(index){//i表示当前所选中的标签
$(this).mouseover(function(){
var liNode = $(this);
//延迟处理 防止用户恶意划动
timeoutid = setTimeout(function(){
$("div.contentin").removeClass("contentin");
$("div.contentfirst").eq(index).addClass("contentin");
$("#tabfirst li.tabin").removeClass("tabin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timeoutid);
});
});
//load()方法：载入远程 HTML 文件代码并插入至 DOM 中
$("#realContent").load("tabLoad.html");
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if(index==0){
$("#realContent").load("tabLoad.html");
}else if(index==1){
$("#realContent").load("tabLoad.jsp h2");
}else if(index==2){
$("#realContent").load("tabData.jsp");
}
});
});
//对于所有Ajax请求开始执行的方法
$("#contentsecond img").bind("ajaxStart",function(){
$(this).show();
$("#realContent").html("");
//Ajax请求结束执行的方法
}).bind("ajaxStop",function(){
$(this).hide();
});
});
其中load方法加载的页面如下：
<html>
<head>
<title>动态加载数据</title>
</head>
<body>
<h2 align="center">Hello Word</h2>
</body>
</html>
<html>
<head>
<title>tabLoad.html</title>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
<html>
<head>
<title>远程输出数据</title>
</head>
<body>
<div>
<%
out.println("远程输出数据！");
%>
</div>
</body>
</html>
分享到：
相关推荐
chromedriver-win32-136.0.7070.0.zip
内容概要：该文档详细介绍了智慧平安城市综合服务平台的需求规格，旨在整合多源异构信息，为警务、安防和社会公共信息服务提供技术支持。平台涵盖用户认证、视频监控、安全监测、政务服务、交通服务、社区服务等多个功能子系统。针对不同终端（如电脑端、手机端和大屏端），提供了定制化的展示和管理功能，并支持与其他第三方系统的接口对接，确保系统的全面性和可扩展性。此外，还明确了平台的高可靠性和高性能要求。 适用人群：项目管理人员、研发人员、测试人员及系统运维团队，主要用于理解和指导智慧平安城市的建设及运营。 使用场景及目标：智慧平安城市综合服务平台的设计和实施旨在增强城市管理效率和服务水平，提高市民生活质量，保障公共安全。通过整合和优化城市各部门资源，提升突发事件的响应和处理能力，构建更加和谐、安全的社会环境。 其他说明：项目要求平台能够处理大量并发请求，在确保数据安全的前提下快速响应各类服务请求，特别是在公共安全领域的智能化辨识及预警方面表现出较高准确性。此外，平台还需要具备良好的用户体验设计，方便各类用户群体操作使用。
内容概要：该文档是一份详细的《系统需求分析说明书》，旨在规划一个针对教育领域的教师信息管理系统。它详尽地阐述了项目的目标和意义在于提升师资管理部门的工作效率和服务质量，确保教职工工资发放的公平性，并通过优化信息管理简化日常操作流程。主要内容涵盖从功能需求如新员工入职、转正考核、教师查询等功能模块的具体流程设计，到非功能性的规定，包括安全措施、辅助指导等方面的内容，以及项目的实施时间安排计划，提供了系统开发的全方位指南，同时配合了直观易懂的用例图表来辅助理解和执行具体的操作步骤。 适合人群：本需求分析报告适用于项目经理、系统分析师、程序员和其他参与或关注教师信息管理系统建设的相关人士。 使用场景及目标：这份需求分析书将被用作指导教师信息系统开发工作的核心参考材料，在项目启动之初作为团队成员沟通的基础文件，帮助相关人员明确各自的任务方向，确定各项工作的完成标准及时限；另外也是日后系统运维、升级扩展的重要依据，对促进后续开发迭代有着重要意义。 其他说明：为了更好地满足实际需求，文中还包括了与业务密切相关的术语解释（词汇表），确保文档内的专业用语得到统一规范表达；同时也提供了一些辅助材料，像思
类似购物前后台管理系统，适合小白练习及自己添加更改
【介绍】 斗兽棋，或动物象棋，由两名玩家（红与黑）进行游戏。游戏的目的是在棋盘两端的对手巢穴中放置一块棋子。你也可以通过夺取对手的所有棋子来获胜。 移动-每件作品都可以向前、向后、向左或向右移动一步，但有一些规则。除了老鼠，没有其他动物可以进入河中，而狮子和老虎可以横向或前后跳过河。通过单击一个块（应出现一个蓝色框）并单击目标方块来移动块。只需将棋子移动到对手占据的方格上，即可捕获每个棋子。如果移动是非法的，棋盘将不会对你的第二次点击做出反应。你不能进入自己的巢穴。 捕捉片段-每个片段对应一种动物，即老鼠、猫、狗、狼、豹、老虎、狮子和大象，并按此顺序排列。每只动物只能捕捉到一只排名较低或与自己同等的动物。例外的是，大象不能抓老鼠，而老鼠可以抓大象。任何一块在河里都无法捕捉到另一块。如果两只老鼠都在河里，一只老鼠可以抓住另一只老鼠。 陷阱-巢穴周围的三个方块，标记为“陷阱”，充当对手棋子的陷阱。任何占据其中一个陷阱的对手棋子都会失去其排名，并可能被任何动物捕获。 老鼠、猫、狗、狼、豹、老虎、狮子、大象。
系统采用B/S架构，集成Spring Boot（后端）、Vue.js（前端）和MySQL（数据库），通过RESTful API实现前后端分离。采用MyBatis-Plus优化数据访问，模块化设计与自动配置提升开发效率，结合数据库索引和读写分离确保性能，Element UI提供友好交互，整体具备高扩展性和可维护性。
特易通国产对讲机MD-398 v1.0中英写频软件
数据结构学习
操作系统学习
数据结构学习
内容概要：该文档是一份关于‘信息资源整合及应用服务平台’需求规格说明书的详尽描述，涵盖项目的总体介绍、业务分析、系统需求、功能模块需求和部署环境等多个方面。文中明确了项目目标是对异构信息资源进行全面整合，并提供了详细的架构设计，确保用户在统一平台上享受高效的资源配置和服务体验。此外还介绍了平台的关键技术工具如TRSWCM和HyBase的使用，及各子系统间协作流程，强调了信息收集渠道多样化及其智能化管理水平。 适用人群：面向项目建设方（即负责系统建设和部署的组织或团队），相关用户和技术人员。 使用场景及目标：为建设‘信息资源整合及应用服务平台’提供建设指导和功能需求分析，明确项目范围、质量标准及开发任务分工；同时有助于相关人员更好地理解该平台的工作机制和应用场景。其他说明:此需求说明书亦可用于指导平台未来的维护和技术升级工作。 其他说明: 包含对系统管理、登录管理、日志管理等多个模块的详细说明，并对每个模块的功能进行了细致划分与介绍。文档末尾附带需求跟踪矩阵，用来监测各个阶段的任务完成情况和进度管理。
图书馆自助借还机使用感受
系统采用B/S架构，集成Spring Boot（后端）、Vue.js（前端）和MySQL（数据库），通过RESTful API实现前后端分离。采用MyBatis-Plus优化数据访问，模块化设计与自动配置提升开发效率，结合数据库索引和读写分离确保性能，Element UI提供友好交互，整体具备高扩展性和可维护性。
操作系统学习
功能描述： 就业管理员则负责岗位类型、招聘信息以及简历投递等流程的管理，保障了招聘流程的顺畅和有效。企业用户通过系统发布招聘信息、管理收到的简历，并组织面试流程。学生用户可管理个人资料、投递简历、接收面试邀请并查看面试结果，为他们的就业之路提供便利和支持。 更多详细信息：https://blog.csdn.net/u011832806/article/details/145713085 本项目是基于Springboot+Vue开发的高校毕业生就业信息管理系统，高分通过项目，已获导师指导。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为课程设计、期末大作业 标价包含：项目源码、万字LW、数据库脚本、开发说明文档、安装部署视频、代码讲解视频、全套软件等，该项目可以直接作为毕设使用。 项目都经过严格调试，确保可以运行！ 环境说明： 开发语言：java JDK版本：jdk1.8 框架：springboot 数据库：mysql 5.7/8 数据库工具：navicat 开发软件：eclipse/idea
传统的管理模式，时间越久管理的内容越多，也需要更多的人来对数据进行整理，并且数据的汇总查询方面效率也是极其的低下，并且数据安全方面永远不会保证安全性能。结合数据内容管理的种种缺点，在互联网时代都可以得到有效的补充。结合先进的互联网技术，开发符合需求的软件，让数据内容管理不管是从录入的及时性，查看的及时性还是汇总分析的及时性，都能让正确率达到最高，管理更加的科学和便捷。本次开发的政府管理系统实现了字典管理、公告管理、公文管理、会议室管理、会议室预约管理、来访登记管理、信访督办管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让政府管理系统更能从理念走到现实，确确实实的让人们提升信息处理效率。 关键字：信息管理，时效性，安全性，MySql
操作系统学习
GD32F407完整bootloader与app代码
数据结构学习