As usual, let’s take a look at the final rendering:

The effect is similar to the previous menu. When the mouse moves over the label, the corresponding content will be displayed below. Of course, there is also the issue of sliding doors.
Code of the front page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <%@ 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= "js/jquery-1.9.1.min.js" type= "text/javascript" ></script>
<script src= "js/tab.js" type= "text/javascript" ></script>
</head>
<body>
<form id= "form1" runat= "server" >
<div id= "firstDiv" >
<ul>
<li class = "tabin" >标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div class = "contentin" >
我是标签一的内容</div>
<div>
我是标签二的内容</div>
<div>
我是标签三的内容</div>
</div>
</form>
</body>
</html>
|
Copy after login
tab.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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;
}
|
Copy after login
tab.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(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" );
nodeTabin.addClass( "tabin" );
}, 300);
}).mouseout( function () {
clearTimeout(setTimeouId);
});
});
});
|
Copy after login
The final effect we achieved is shown in the figure:

When you click on label one, the entire content of an html is loaded below; when you click on label two, part of an asp.net page is loaded below, and no effect is added to label three.
The code for the frontend of the page is as shown in the figure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <%@ 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= "js/jquery.js" type= "text/javascript" ></script>
<script src= "js/tab.js" type= "text/javascript" ></script>
</head>
<body>
<form id= "form1" runat= "server" >
<div id= "firstDiv" >
<ul>
<li class = "tabin" >标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div class = "contentin" >
我是标签一的内容</div>
<div>
我是标签二的内容</div>
<div>
我是标签三的内容</div>
</div>
<br />
<br />
<br />
<div id= "secondDiv" >
<ul>
<li class = "tabin" >标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div id= "secondContentin" >
<img src= "/static/imghw/default1.png" data-src= "images/img-loading.gif" class = "lazy" alt= "Two examples of JQuery tab page effects (4)_jquery" />
<div id= "realContentin" ></div>
</div>
</div>
</form>
</body>
</html>
|
Copy after login
tab.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 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;
z-index:100;
}
#secondContentin
{
width:300px;
height:200px;
padding:10px;
background-color:#F2F6F8;
clear:left;
border:1px solid black;
position:relative;
top:-1px;
}
img
{
display:none;
}
|
Copy after login
Regarding the issue of z-index, it is explained in the comments. The screenshot below is the content of the js manual that I took:
tab.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(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" );
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) {
}
});
});
$( "#secondContentin img" ).bind( "ajaxStart" , function () {
$(this).show();
}).bind( "ajaxStop" , function () {
$(this).hide(1000);
});
});
|
Copy after login
Here, I would like to mention that when I started, I used jquery-1.9.1.min.js, but when binding the ajax event, I could not bind it, but I could bind the click event.
Therefore, I suggest that you do not use the latest version of jquery to avoid some inexplicable problems.
Regarding the above two tab page effects, I hope this article compiled by the editor can help everyone.