[置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时，不同的选项卡会出现自己对应的界面的要求，在同一个界面上表达了尽量多的信息、大大额提高了空间的利用率、界面的切换效果也是不错的哦，这次自己可以实现啦。
效果图
制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容，随着标签的
改变，下面的div也会对应改变样式
我们要实现上面的效果：
CSS：
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
#tabsecond li {
float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
/**/
border: 1px solid black;
border-bottom: 0;
/*层级，数越大显示的越靠上*/
z-index: 100;
/*设置relative才能设置z-index*/
position: relative;
}
#contentsecond {
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
/*通过此设置造成标签和对应标签页连在一起的假象*/
position: relative;
top: -1px;
}
img {
display: none;
}
HTML代码：HTML代码：
<!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">
<meta http-equiv="Content-Type" content ="text/html;charset=UTF-8" />
<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>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ul id="tabfirst">
<li class="tabin">科技</li>
<li>经济</li>
<li>体育</li>
</ul>
<div class="contentin contentfirst">科技新闻</div>
<div class="contentfirst">经济新闻</div>
<div class="contentfirst">体育新闻</div>
<br />
<ul id="tabsecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond" display="block">
<img alt="装载中" src="images/img-loading.gif" />
<div id="realcontent"></div>
</div>
</form>
</body>
</html>
控制滑的JS：
这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件
1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法
2 mouseover事件
var timoutid;
$(document).ready(function () {
//dom准备完毕执行
$("#tabfirst li").each(function (index) {
$(this).mouseover(function () {
var liNode = $(this);
timoutid = setTimeout(function () {
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
}, 300);
}).mouseout(function () {
//鼠标移除清楚延迟
clearTimeout(timoutid);
});
});
//加载全部内容
$("#realcontent").load("allTab.html");
//注册对应的标签点击事件
$("#tabsecond li").each(function (index) {
$(this).click(function () {
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入全部内容
$("#realcontent").load("allTab.html");
} else if (index == 1) {
//装入虚拟动态部分页面
$("#realcontent").load("allTab.html h2");
} else if (index == 2) {
//注入部分内容
$("#realcontent").load("allTab.html span")
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart", function () {
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前，function中的内容会被执行
$(this).show();
}).bind("ajaxStop", function () {
//整个页面中任意ajax交互结束后，function中的内容会被执行
$(this).slideUp("1000");
});
});
通过网上的好多网站的实例：值得我们深入的研究学习，站在巨人的肩膀上哈！
