今天，我们将完成《jQuery实战》系列的tab效果。我们先来看看效果图

这里有两部分，上面是一个tab的效果，下面也是一个tab的效果。在实际应用中，经常会看到tab的效果，其主要功能是在页面可视区域有限的情况下展示更多的内容。当用户想要查看其他内容时，不需要离开页面，只需要将鼠标移动到某个标签上就可以看到这个标签中对应的内容。在门户网站的主页上，有许多渠道是选项卡的最佳案例。例如，体育、金融、军事等模块位于不同的选项卡上。上面的标签一般叫推拉门技术，下面的内容加载一次。鼠标移动到某个选项卡后，下面的内容会显示相应的内容，不加载页面。下面的选项卡是以另一种方式编写的，它是通过其他页面加载的。当您滑动到选项卡时，加载相应的页面。

好了，让我们开始编写代码，首先编写html页面“tab.jsp”。

body ul id=' tab first ' Li class=' tabin ' tag 1/Li litabel 2/Li litabel 3/Li/ul Div class=' content in content first '我是content 1/1/Div class=' content first '我是content 2/Div Div class=' content first '我是content 3/div /body通用标签。我们都用ul和li来代表一个标签。里面有三个li，分别是标签1、标签2和标签3。在较低的内容区域有三个div。这三个div是预加载的。此时，基本骨架已经完成，然后编写css代码。第一步是将ul中的li转化为标签的效果。回忆上一课，li默认是垂直效果，我们想把它改成水平清晰使用li的特征，然后让它浮动来达到相应的效果。

$(文档)。ready(function(){ $(' # tab first Li '))。mouseover (function () {//1。将原来的深色李去掉$('。塔宾')。remove CLaSS(' tabin ')；//2.隐藏最初显示的div $('。content in’)。移除类(“content in”)；//3.计算哪个li var chooseStr=$(这个)。鼠标点中的html()；var索引=0；if(' Label 1 '==chooseStr){ index=0；} else if('标记2 '==chooseStr){ index=1；} else if('标记3 '==chooseStr){ index=2；} //4.将相应的div显示和相应的li加深$(“# tab first Li : eq(‘index’)”)。添加类(' tabin ')；$(' div . content first : eq(' index ')')。add CLaSS(' content in ')；});});mouseover()函数在这里的意思是当鼠标进入li时执行函数内部的代码。函数内部的代码首先移除原来的深色li，然后隐藏原来显示的div，计算鼠标点中的哪个li被分配给索引变量，最后显示相应的div，加深相应的li并显示相应的div。

以下标签有相同的想法，整个html页面如下：

% @ page language=' Java ' ContentType=' text/html；charset=UTF-8 ' page encoding=' UTF-8 ' %！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 ' link type=' text/CSS ' rel='样式表' href='./CSS/tab . CSS ' rel=' external no follow '/script type=' text/JavaScript ' src=' http :/js/Jquery-1 . 7 . 2 . min . js/' script script type=' text/JavaScript ' src=' http :/js/tab.js'/scripttitlejquery， tab/title/Head body Ul id=' tab first ' Li class=' tabin ' tag 1/Li Li tag 2/Li Li tag 3/Li/Ul Div class=' content in content first '我是content 1/1/Div class=' content first '我是content 2/Div class=' content first '我是content 3/Div br/br/Ul id=' tabside ' Li class=' tabin '加载整页/Li./image/img-loading . gif '/div id=' real content '/div/div/body/html CSS文件如下3360

ul，Li { margin : 0；padd : 0；列表样式：无；}#tabfirst li {左侧浮动：背景色： # 868686;颜色：白色；padd : 5pxmargin-right : 2px；border: 1px纯白色；} # tab第一个李。tabin {底色： # 6e 6e 6 e；border: 1px固体# 6E6E6E } div。内容第一{ clear : left背景色-: # 6e6e 6 e；颜色：白色；宽度： 300像素；高度： 100像素；padding: 10pxdisplay:无；} div。{显示器： }中的内容块；}#tabsecond li {左侧浮动：背景-颜色：白色；颜色：蓝色；padd : 5pxmargin-right : 2px；光标：指针；} # tab第二个李。tabin {底色： # F2F6FBborder: 1px纯黑；边框-底部： 0;z指数： 100；相对位置：} #内容秒{宽度： 500 px高度： 200像素；padding: 10px背景-颜色： # F2F6FBclear:左侧；border: 1px纯黑；相对位置：top :-1px；} img { display: none}jQuery代码如下：

/** *选项卡页面模块的射流研究…代码*/$(文档)。ready(function(){ $(' # tab first 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 ').'加载('./JSP/TabLoad。html ')；//找到标签2效果对应的三个标签，注册鼠标点击事件$('#tabsecond li ').每个（函数（索引){ $(这个)).单击(function(){ $('#tabsecond .塔宾')。移除CLaSS(' tabin ')；$(这个)。addCLaSS(' tabin ')；if(0==index) { $('#realcontent ').加载('./JSP/TabLoad。html ')；} else if(1==index){ $(' # real content ').'加载('./JSP/TabLoad 1。html H2 ')；} else if(2==index){ $(' # real content ').load('/JqueryStudy/tabServlet ')；} });});//对于装货图片绑定创建交互式、快速动态网页应用的网页开发技术请求开始和交互结束的事件$('#contentsecond img ').bind('ajaxStart '，function(){ $('#realcontent ')).html(" ")；$(这个)。show()；}).bind('ajaxStop '，function(){ $(this).向上滑动(' 1000 ');});});代码参考地址：https://github。com/shizongger/jqueryaction

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

参考资料： 1.王兴奎《jQuery实战》 2.w3school