本文实例讲述了JQuery标签页效果实现方法。分享给大家供大家参考，具体如下：

第一个标签页中鼠标滑过显示不同的标签页，第二个标签页中点击不同标签加载其他页面中的内容，加载等待的图片缓慢隐藏，效果图如下：

/WebRoot/4 .Tab.html:

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。' DTD ' HTML标题jquery实例4:标签页效果/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' link type=' text/CSS ' rel='样式表href=' CSS/tab。CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' src=' http : js/tab。js '/script/head body ul id=' tab first ' Li class=' tabin '标签1/李莉标签2/李莉标签3/Li/ul div class='内容优先'我是内容1/div div class='contentfirst '我是内容2/div类=内容优先我是内容3/div br/br/br/ul id=' tab second ' Li class=' tabin '装入完整页面/li li装入部分页面/li li从远程获取数据/Li/ul div id='内容第二' img alt='装载中src=' http : images/img-loading。gif '/div id='真实内容'/div/div/body/html/Webroot/js/tab。js:

var timoutid$(文档)。就绪（函数(){ //找到所有的标签/* $('li ').mouseover(function(){ //将原来显示的内容区域进行隐藏$('div.contentin ').hide()；//当前标签所对应的内容区域显示出来});*/$('#tabfirst li ').每个（函数（索引){ //每一个包装里的jquery对象都会执行功能中的代码//索引是当前执行这个功能代码的里对应在所有里组成的数组中的索引值//有了指数的值之后，就可以找到当前标签对应的内容区域$(这个)。将鼠标悬停在(function(){ var LiNode=$(this)上；Timo utid=setTimeout(function(){//将原来显示的内容区域进行隐藏$('div.contentin ').移除CLaSS('中的内容')；//对有塔宾的班级定义的里清除塔宾的class $('#tabfirst li.tabin ').移除CLaSS(' tabin ')；//当前标签所对应的内容区域显示出来//$(“div”).eq(指数)。添加CLaSS(' content in ')；$(' div。内容优先： eq(' index ').添加CLaSS(' content in ')；利诺德。addCLaSS(' tabin ')；},300);}).鼠标移出(function(){ cleartime out(Timo utid))；});});//在整个页面装入完成后，标签效果2的内容区域需要装入静态的超文本标记语言页面内容$('#realcontent ').load(' TabLoad。html ')；//找到标签2效果对应的三个标签，注册鼠标点击事件$('#tabsecond li ').每个（函数（索引){ $(这个)).单击(function(){ $(' # tab秒李。塔宾' .移除CLaSS(' tabin ')；$(这个)。addCLaSS(' tabin ')；if (index==0) { //装入静态完成页面$('#realcontent ').load(' TabLoad。html ')；} else if (index==1) { //装入动态部分页面$('#realcontent ').load(' TabLoad。js ph2’)；} else if (index==2) { //装入远程数据（这里也是一个动态页面输出的数据)//$('#realcontent ').加载(' TabDATa。JSP’)；$('#realcontent ').load(' TabLoad。JSP’)；} });});//对于装货图片绑定创建交互式、快速动态网页应用的网页开发技术请求开始和交互结束的事件$('#contentsecond img ').bind('ajaxStart '，function(){ //把差异里面的内容清空$('#realcontent ').html(" ")；//整个页面中任意创建交互式、快速动态网页应用的网页开发技术交互开始前，功能中的内容会被执行$(这个)。show()；}).bind('ajaxStop '，function(){ //整个页面中任意创建交互式、快速动态网页应用的网页开发技术交互结束后，功能中的内容会被执行$(这个)。向上滑动(5000)；});});/WebRoot/css/tab.css:

ul，Li { margin : 0；padd : 0；list-style:无；}#tabfirst li {左侧浮动：背景色： # 868686；color:白色；padding: 5pxmargin-right : 2px；border: 1px纯白色；} # tab first Li . tabin { background-color : # 6e6e 6 e；border: 1px固体# 6E6E6E} div . content first { clear : left；背景色-: # 6e6e 6 e；color:白色；宽度： 300 px；高度： 100像素；padding: 10pxdisplay:无；} div . content in { display : }块；}#tabsecond li {左侧浮动：背景-颜色：白色；颜色：蓝色；padding: 5pxmargin-right : 2px；cursor:指针；} # tab second Li . tabin { background-color : # F2F6FB；border: 1px纯黑；边框-底部： 0；z-index : 100；相对位置：} # content second { width : 500 px；高度： 200 px；padding: 10px背景-color : # F2F6FB；clear:左侧；border: 1px纯黑；相对位置：top :-1px；} img { display: none}/WebRoot/TabLoad.html:

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML；Charset=UTF-8'title这是一个静态页面/title/head dy加载静态页面的内容。Br加载静态页面的内容。Br加载静态页面的内容。Br加载静态页面的内容。Br加载静态页面的内容。Br加载静态页面的内容。br/body/html/Webroot/TabLoad . JSP:

% @ page language=' Java ' ContentType=' text/html；charset=UTF-8 ' page encoding=' UTF-8 ' % % @ page import=' Java . util . * %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 ' title high page/title/head dyh 2%=new date()% br % 1。这是动态页面br 2的一部分。这是动态页面br 3的一部分。这是动态页面的一部分br /h2 h2该部分不显示br/body/htmljQuery和本节中学习的其他开发知识：

1.一组标签由一个ul管理，每个标签是ul中的一个Li；标签下面的内容由div管理。

2.浮动元素后面的元素将包围浮动元素。如果不想要这种环绕，可以在浮动元素后面的元素上定义一个clear属性来清除这种效果。

3.当前标签和内容区域的融合可以通过对当前标签使用相同的背景颜色和相同颜色的边框来实现。

4.4中的鼠标悬停和鼠标移出方法。JQuery对应标准javascript的onmouseover和onmouseout事件，可以处理鼠标进出的事件。

5.在包含多个元素的JQuery对象上执行每个方法，可以注册到每个方法的函数内容由每个元素执行。同时，这个函数还可以接收一个指示这个元素的索引值的参数。JQuery中的许多方法也分别使用。

6.6.eq方法只能根据索引值获取JQuery对象中包含的几个元素中的一个，仍然返回该元素对应的新JQuery对象。

7.在选择器中使用eq，例如$(“div : eq(1)”)。

8.addClass和removeClass方法用于添加和移除元素的类定义。

9.9中的setTimeout方法。Javascript可以延迟一些代码的执行，对应的clearTimeout可以清除设置的延迟操作。

10.在做一个AJAX应用的时候，可以考虑现在就在FireFox上通过调试，然后在其他浏览器中进行检查，修正可能的兼容性问题。

11.11.cursor属性可以控制元素上的鼠标样式，指针属性值表示手型，这是我们常用的链接鼠标样式。

12.位置属性可以控制元素定位的方式。当值是相对的时，它意味着相对于原始位置的定位。您可以设置顶部、左侧、底部和右侧的值，以控制元素相对于其原始位置的移动。

13.z-index可以控制页面中元素的高度。该值越高，它在页面前面的位置就越高，并且它将覆盖一些z索引值较低的元素。z指数只有在位置值为相对或绝对时才会生效。

14.jquery中的load方法非常强大，可以将指定的静态或动态页面或者服务器端程序输出的数据加载到执行load方法的JQuery对象所包装的元素中。

15.加载方法也支持部分加载。在加载的页面地址中添加一个空格，然后使用选择器，您可以加载页面中符合选择器的部分。

16.加载页面必须是UTF 8编码，否则加载后会出现乱码中文。

17.bind可用于将Javascript事件或JQuery中定义的事件绑定到指定的节点。在JQuery中不直接提供注册方法的事件可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

18.ajaxStart和ajaxStop对应于ajax交互前后的事件。在为某个节点注册了这两个事件之后，指定的方法将在当前页面上的ajax交互之前和之后执行。

希望本文对大家的jQuery程序设计有所帮助。