页面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>
分享到:
相关推荐
西工大数据结构实验
操作系统学习
weixin046云上考场+ssm(文档+源码)_kaic
基于C语言+STM32+MQTT协议实现的物联网健康监测系统(底层)+微信小程序操作界面+源码+项目文档+模块接线说明,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C语言+STM32+MQTT协议实现的物联网健康监测系统(底层)+微信小程序操作界面+源码+项目文档+模块接线说明,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于C语言+STM32+MQTT协议实现的物联网健康监测系统(底层)+微信小程序操作界面+源码+项目文档+模块接线说明,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C语言+STM32+MQTT协议实现的物联网健康监测系统(底层)+微信小程序操作界面+源码+项目文档+模块接线说明,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档
刘铭-计算机视觉-简历-算法OCR.md
数据结构学习
我的图书馆特色藏书推荐
前端分析-2023071100789s10
2025年Go语言教程核心内容指南
数据结构学习
2025年美赛全流程指南
操作系统学习
内容概要:本文档详细介绍了如何编制一份详尽的详细设计说明书,主要面向J2EE开发环境。文中具体覆盖了项目设计的关键要素,比如多项目的管理和组织方法、各系统层次及其内部模块的组成与关系解析,源码及各类设计规则的说明,以及对界面、数据库、异常处理等方面的要求。此外,文档还特别提供了详细的业务功能设计指南,涵盖界面原型设计、交互路径、数据校验、日志处理等环节的细致规定。同时强调了编码规范和标签一致性对项目稳定性和高效维护的重要性。 适用人群:本文档是给参与复杂J2EE项目的程序员、项目经理和其他相关人员作为编写详细设计方案的基础材料和技术指引。它适用于拥有一定的编程知识并熟悉Java及相关Web技术框架的开发者。 使用场景及目标:旨在提高项目团队协作效率的同时确保整个项目的一致性与可靠性。通过提供标准化的方法论支持,帮助开发者完成从架构规划直至具体实现阶段的所有任务。最终目的是构建高质量且容易扩展的应用系统。 其他说明:为了更好地服务于实际应用的需求,该模板鼓励各团队在遵循基本结构的基础上,依据自身特性灵活调整文档的具体构成要素,并积极借鉴过往优秀案例的经验教训以改进和完善现有的设计流程。
数据结构学习
后端面试常见问题总结 - JAVA基础.pdf
该资源包可以生成节点标签表格,同时直接提取odb文件当中的节点对应信息
数据结构学习
本研究借助 ABAQUS 软件深入探究两个金属部件的摩擦磨损过程,全面阐述了从模型构建到结果剖析的完整流程,并结合刹车片与刹车盘的实际案例展现其应用。通过详细的图文及表格说明,为相关工程领域的材料磨损分析与部件设计优化提供了直观且有力的参考,有助于提升设备性能与可靠性,降低研发成本。
人工智能资源,C语言 实现识别手写数字,读取指定名称的图像文件,将图像的前 28x28 个像素转换为归一化的灰度值,并将这些灰度值存储到传入的双精度浮点数数组中。