按照惯例，我们还是先来看一下最终要达到效果图：
和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。
前台页面的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">tab.css
ul,li { list-style:none; margin:0; padding:0; } li { background-color:#6E6E6E; float:left; color:White; padding:5px; margin-right:3px; border: 1px solid white; } .tabin { border:1px solid #6E6E6E; } #firstDiv div { clear:left; background-color:#6E6E6E; width:200px; height:100px; display:none; } #firstDiv .contentin { display:block; }tab.js
/// <reference path="jquery-1.9.1.min.js" /> $(document).ready(function () { var setTimeouId; $("#firstDiv li").each(function (index) { $(this).mouseover(function () { var nodeTabin = $(this); setTimeouId = setTimeout(function () { $("#firstDiv .contentin").removeClass("contentin"); $("#firstDiv .tabin").removeClass("tabin"); $("#firstDiv div").eq(index).addClass("contentin"); //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); });我们最终实现的效果如图所示：
当单击标签一的时候，下面加载的是一个html的全部内容；当单击标签二的时候，下面加载的是一个asp.net页面的一部分内容，标签三未添加效果。
页面前台的代码如图：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="/UploadFiles/2021-04-02/jquery.js">tab.css
ul,li { list-style:none; margin:0; padding:0; } #firstDiv li { background-color:#6E6E6E; float:left; color:White; padding:5px; margin-right:3px; border: 1px solid white; } #firstDiv .tabin { border:1px solid #6E6E6E; } #firstDiv div { clear:left; background-color:#6E6E6E; width:200px; height:100px; display:none; } #firstDiv .contentin { display:block; } #secondDiv li { float:left; color:Blue; background-color:White; padding:5px; margin-right:3px; /*当鼠标放在标签上时，显示成小手*/ cursor:pointer; } #secondDiv li.tabin { background-color:#F2F6F8; border:1px solid black; border-bottom:0; /*只有position设置成relative或者absolute的时候z-index才有效*/ position:relative; z-index:100; } #secondContentin { width:300px; height:200px; padding:10px; background-color:#F2F6F8; clear:left; border:1px solid black; /*下面是让底下的内容向上移动一个像素 *但是，我们可以看到，并没有达到我们想要的效果，接下 *来要上上面的li显示层次在最上面，这样就盖住了下面的div的border */ position:relative; top:-1px; } /*开始的时候让loading图片隐藏*/ img { display:none; }关于z-index的问题，注释上有说明，下面的截图是我截的js手册上的内容：
tab.js
/// <reference path="jquery.js" /> $(document).ready(function () { var setTimeouId; $("#firstDiv li").each(function (index) { $(this).mouseover(function () { var nodeTabin = $(this); setTimeouId = setTimeout(function () { $("#firstDiv .contentin").removeClass("contentin"); $("#firstDiv .tabin").removeClass("tabin"); $("#firstDiv div").eq(index).addClass("contentin"); //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); $("#realContentin").load("HTMLPage.htm"); $("#secondDiv li").each(function (index) { $(this).click(function () { /*更改样式*/ $("#secondDiv li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if (index == 0) { $("#realContentin").load("HTMLPage.htm"); } else if (index == 1) { $("#realContentin").load("Default.aspx div"); } else if (index == 2) { } }); }); //我刚开始的时候用的是jquery的最新版本，但是出现了无法绑定的问题。 $("#secondContentin img").bind("ajaxStart", function () { $(this).show(); }).bind("ajaxStop", function () { //setTimeout(function(){$(this).hide()},300); $(this).hide(1000); }); });在这里，我想提一下，就是我开始的时候，用的是jquery-1.9.1.min.js，但是在绑定ajax事件的时候，无法绑定，可以绑定click事件。
所以，我建议大家不要用最新版的jquery，避免出现一些莫名其妙的问题。
以上两种标签页效果，希望小编整理的这篇文章可以帮助到大家。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JQuery标签页效果的两个实例讲解（4）”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。