JQuery标签页效果的两个实例讲解（4）
作者：bea
按照惯例，我们还是先来看一下最终要达到效果图： 和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。 前台页面的代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
按照惯例，我们还是先来看一下最终要达到效果图：
和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。
前台页面的代码：
<%@ 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>
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="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 alt="装载中" src="images/img-loading.gif" />
<div id="realContentin"></div>
</div>
</div>
</form>
</body>
</html>
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，避免出现一些莫名其妙的问题。
以上两种标签页效果，希望小编整理的这篇文章可以帮助到大家。
猜你喜欢
您可能感兴趣的文章:
- jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
- JS+CSS实现简单滑动门(滑动菜单)效果
- jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
- jQuery实现点击按钮弹出可关闭层的浮动层插件
- JS基于myFocus库实现各种功能的tab选项卡切换效果
- JS实现仿雅虎首页快捷登录入口及导航模块效果
- JS实现的不规则TAB选项卡效果代码
- JS实现兼容性好,带缓冲的动感网页右键菜单效果
- JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
- jQuery采用连缀写法实现的折叠菜单效果
- JS+CSS实现TreeMenu二级树形菜单完整实例
- JS实现黑色大气的二级导航菜单效果
- 11种ASP连接数据库的方法
- jquery实现隐藏在左侧的弹性弹出菜单效果
- JS+CSS实现简易实用的滑动门菜单效果
- JS实现很实用的对联广告代码（可自适应高度）
- jQuery实现可用于博客的动态滑动菜单完整实例
- jquery实现仿Flash的横向滑动菜单效果代码
- JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码