按照惯例，我们还是先来看一下最终要达到效果图：

和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。前台页面的代码：

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' tab。aspx。cs“Inherits=”选项卡“%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link href=' CSS/tab。CSS ' rel='样式表type=' text/CSS '/script src=' http 333标签一/li li标签二/li li标签三/li /ul div class='contentin '我是标签一的内容/div我是标签二的内容/div我是标签三的内容/div /div /form /body /html tab.css

ul，Li {列表式：无；余量：0划水：0;}李{底色： # 6e6e 6efloat:left颜色：白色；padding:5px右边距：3 pxborder: 1px纯白色；} .tabin { border:1px固体# 6E6E6E} #第一个分区{ clear:left背景色-: # 6e6e 6 e；宽度宽度：200像素高度：100 pxdisplay:none} #firstDiv .{ display:block}选项卡. js中的内容

///引用路径='jquery-1.9.1.min.js'/$(文档)。ready(function(){ var setTimeouId；$('#firstDiv li ').每个（函数（索引){ $(这个)).鼠标悬停在(function(){ var nodeTabin=$(this)上；setTimeouId=setTimeout(function(){ $(' # first div .内容在').移除CLaSS('中的内容')；$('#firstDiv .塔宾')。移除CLaSS(' tabin ')；$('#firstDiv ').eq(指数)。添加CLaSS(' content in ')；//我在这里犯错了哦，不应该再用这个这个如果用在这里的话那么是指的窗口节点表。add class(' tabin ')；}, 300);}).鼠标移出(function(){ cleartime out(setTimeouId))；});});});我们最终实现的效果如图所示：

当单击标签一的时候，下面加载的是一个超文本标记语言的全部内容；当单击标签二的时候，下面加载的是一个ASP。网页面的一部分内容，标签三未添加效果。页面前台的代码如图：

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' tab。aspx。cs“Inherits=”选项卡“%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link href=' CSS/tab。CSS ' rel='样式表type=' text/CSS '/script src=' http 333标签一/li li标签二/li li标签三/li /ul div class='contentin '我是标签一的内容/div我是标签二的内容/div我是标签三的内容/DIv/DIv br/br/br/DIv id=' SeCOnd DIv ' ul Li class=' tabin '标签一/li li标签二/li li标签三/Li/ul div id=' secondContentin ' img alt='装载中src=' http : images/img-loading。gif '/div id=' real centin '/div/div/form/body/html选项卡。半铸钢钢性铸铁(Cast Semi-Steel)

ul，Li {列表式：无；余量：0划水：0;} #第一个DiV李{底色： # 6e 6e 6 e；float:left颜色：白色；padding:5px右边距：3 pxborder: 1px纯白色；} #第一部分.tabin { border:1px固体# 6E6E6E} #第一个分区{ clear:left背景色-: # 6e6e 6 e；宽度宽度：200像素高度：100 pxdisplay:none} #firstDiv .{ display:block}中的内容# secondDiv li { float:left颜色：蓝色；背景-颜色：白色；padding:5px右边距：3 px/*当鼠标放在标签上时，显示成小手*/光标：指针；} #第二区李。tabin {底色： # F2 F6 F8；border:1px纯黑；边框-底部：0;/*只有位置设置成亲戚或者绝对的的时候z指数才有效*/位置：相对；z指数：100;} #第二个内容在{ width :300 px高度：200 pxpadding:10px背景-颜色： # F2 F6 F8；clear : leftborders :1 px纯黑；/*下面是让底下的内容向上移动一个像素*但是，我们可以看到，并没有达到我们想要的效果，接下*来要上上面的里显示层次在最上面，这样就盖住了下面的差异的边框*/位置：相对；top :-1px；} /*开始的时候让装货图片隐藏*/img { display : none；} 关于z指数的问题，注释上有说明，下面的截图是我截的射流研究…手册上的内容：

tab.js

///引用路径='jquery.js'/$(文档)。ready(function(){ var setTimeouId；$('#firstDiv li ').每个（函数（索引){ $(这个)).鼠标悬停在(function(){ var nodeTabin=$(this)上；setTimeouId=setTimeout(function(){ $(' # first div .内容在').移除CLaSS('中的内容')；$('#firstDiv .塔宾')。移除CLaSS(' tabin ')；$('#firstDiv ').eq(指数)。添加CLaSS(' content in ')；//我在这里犯错了哦，不应该再用这个这个如果用在这里的话那么是指的窗口节点表。add class(' tabin ')；}, 300);}).鼠标移出(function(){ cleartime out(setTimeouId))；});});$(' # realcentin ').加载(' HTMlPage。htm’)；$('#secondDiv li ').每个（函数（索引){ $(这个)).click(function () { /*更改样式*/$('#secondDiv li.tabin ').移除CLaSS(' tabin ')；$(这个)。addCLaSS(' tabin ')；if(index==0){ $(' # realcentin ').加载(' HTMlPage。htm’)；} else if(index==1){ $(' # real centin ').加载('默认值。aspx div’)；} else if(index==2){ } })；});//我刚开始的时候用的是jquery的最新版本，但是出现了无法绑定的问题$('#secondContentin img ').bind('ajaxStart '，function () { $(this).show()；}).bind('ajaxStop '，function(){//setTimeout(function(){ $(this)).hide()}，300)；$(这个)。隐藏(1000);});});在这里，我想提一下，就是我开始的时候，用的是jquery-1.9.1.min.js，但是在绑定创建交互式、快速动态网页应用的网页开发技术事件的时候，无法绑定，可以绑定点击事件。所以，我建议大家不要用最新版的jquery，避免出现一些莫名其妙的问题。以上两种标签页效果，希望小编整理的这篇文章可以帮助到大家。