页面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>
分享到：
相关推荐
本主题聚焦于如何在iPhone应用程序中实现自定义Tabbar，包括滑片效果和按钮跳跃动画，这将极大地提升应用的交互性和视觉吸引力。 首先，让我们了解iOS中的TabbarController（UITabBarController）。它是苹果提供的...
在石油库铁路油品接卸系统中，传统的卸油工艺往往采用水环式真空泵，但随着技术的进步，滑片泵的应用逐渐受到关注。本文主要探讨了如何将滑片泵与离心泵相结合，以优化卸油工艺流程，提高效率并简化操作。 滑片泵是...
2. 检查滑片：滑片应无明显磨损，保持弹性，磨损严重需更换。 3. 气缸检查：检查气缸内壁是否光滑，有无拉伤或裂纹，若有损坏需研磨或更换。 4. 密封件检查：确认密封圈、垫片等是否完好，如有老化、硬化需更换。 ...
除了电信行业，可移动滑片机空气压缩系统也广泛应用于工业生产、建筑施工、医疗设备等多种场景，因其便携性和可靠性受到用户的青睐。 8. **安全考虑**： 在操作和维护此类设备时，必须遵守安全规定，如佩戴防护...
滑片式自吸泵是一种广泛应用于工业和农业领域的液体输送设备，其主要特点是具有自吸功能，能够在短时间内建立起足够的真空度，将液体吸入泵内，从而实现无须人工灌液的操作。滑片式自吸泵的工作原理、设计要点以及...
四、应用领域 托盘滑片自动供料机广泛应用于电信设备的制造，如基站、交换机、光通信模块等产品的生产过程中。同时，其原理和技术也可推广至电子、汽车、航空航天等行业，对提高生产自动化水平和降低成本具有重要...
滑片自吸泵是一种在工业领域广泛应用的泵设备，尤其适用于需要快速建立真空或输送液体的场合。设计计算滑片自吸泵涉及到多个关键因素，包括流体力学、机械工程和材料科学等知识领域。以下将详细介绍滑片自吸泵的设计...
滑片压缩机也不例外，随着新材料、新工艺和新技术的应用，滑片压缩机的设计和性能也在不断地优化和提高。Matlab动力学模拟分析作为一种有效的技术手段，将继续在压缩机技术的发展中扮演重要的角色。
在第四个问题中，同学发现电流与电阻不成反比，可能是因为没有保持电压恒定。改进实验后，应选择乙图作为电路设计，因为乙图中的滑动变阻器可以用来控制通过电阻的电压，保持其不变。滑动变阻器的作用是调节电路中的...
《矿用移动滑片空气压缩机的维护与故障排除》 在煤矿作业中，矿用移动滑片空气压缩机是至关重要的设备，它为井下机械提供必要的压缩空气，用于动力驱动、通风、排水以及安全设施等。了解并掌握其维护与故障排除的...
1. 转子与滑片：转子通常为偏心设计，滑片安装在转子槽内，随着转子的旋转，滑片在离心力作用下紧贴泵壳内壁，形成密封的工作空间。滑片材质通常选择耐磨、耐腐蚀的材料，以保证长期稳定运行。 2. 泵壳：泵壳设计有...
滑片自吸泵是一种广泛应用在工业、农业及民用领域的流体输送设备，其工作原理是依靠泵体内旋转的转子和固定在转子上的滑片共同作用，将液体吸入并排出。这种泵型因其自吸能力强、结构简单、维护方便等优点而受到青睐...
相比于传统的往复式压缩机和螺杆压缩机，滑片式压缩机在实际应用中能够提供更长的使用寿命、更好的排气质地、更高的效率和更少的维护需求，被誉为“五星级”的空气压缩解决方案。 总之，滑片式空气压缩机以其独特的...
滑片自吸泵是一种在工业领域广泛应用的流体输送设备，尤其在液体输送、灌溉、化工、制药等行业中发挥着重要作用。其设计开发与试验涵盖了机械工程、流体力学、材料科学等多个领域的知识。 首先，滑片自吸泵的核心...
【欧姆定律应用四动态电路分析】 欧姆定律是电路分析中的基础，它阐述了电流、电压和电阻之间的关系：电流I等于电压V除以电阻R，即I=V/R。在动态电路分析中，欧姆定律的应用尤其关键，尤其是在处理滑动变阻器和电键...
在现代机械工程领域，滑片压缩机作为一种新型回转压缩机，由于其结构简单、噪声低、能耗低等特点，在工业和汽车行业中得到了广泛应用。滑片压缩机的工作原理是通过滑片与气缸、转子的配合将气缸内的空间分成若干个小...
滑片泵是一种常见的液压机械，主要应用于各种流体传输系统，如石油化工、船舶动力和工程机械等领域。其工作原理是依靠泵体内转子的旋转，使安装在转子槽内的滑片与泵体内壁形成密封的工作腔，从而实现流体的吸入和排...
传统的曲柄连杆活塞系统虽然广泛应用，但由于其复杂的结构和多个能量转换环节，存在较大的能量损耗。为解决这一问题，滑片式旋转活塞应运而生。 滑片式旋转活塞的核心思想是减少活塞往复运动时的惯性损耗。通过让...
滑片自吸泵是一种常见的流体输送设备，广泛应用于工业、农业及民用领域。它以其高效、自吸能力强等优点受到青睐。然而，在实际运行过程中，滑片自吸泵可能会出现振动与噪声的问题，这不仅影响设备的工作效率，还可能...