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");
});
});
通过网上的好多网站的实例：值得我们深入的研究学习，站在巨人的肩膀上哈！
JQuery实战总结三 标签页效果图实现的更多相关文章
- [置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- Jquery实现的Tabs标签页
效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...
- 《vue.js实战》练习---标签页组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- jQuery菜单，导航与标签页
一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单 法一: <!DOCTYPE html PUBLIC " ...
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 如何一行jquery代码写出tab标签页（链式操作）
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
随机推荐
- PHP 5 Math 函数
PHP Math 简介 Math 函数能处理 integer 和 float 范围内的值. 安装 PHP Math 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP 5 Math 函 ...
- Windows下Java如何调用本地获取mac地址
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- 准备在CSDN知识库建立一个Ext JS的知识库
CSDN近期正在建立一个知识库,目标是打造身边的技术百科全书 ,我觉得这创意挺好,就像stackoverflow一样,常见的问题在里面基本都有了,只要通过搜索就能找到所需的答案. 现在,大家对于Ext ...
- Eclipse调试（2）——各种类型断点设置
本文是Eclipse调试(1)--基础篇 的提高篇.分两个部分: 1) Debug视图下的3个小窗口视图:变量视图.断点视图和表达式视图 2) 设置各种类型的断点 变量视图.断点视图和表达式视图 1. ...
- Dynamics CRM2013 导入解决方案(快速视图窗体)SystemForm With Id Does Not Exist的解决方法
在CRM2013的环境下导入解决方案报错,具体报错截图如下 根据id去数据库中查找这个id的systemform,确认是存在的,而且通过第二条记录我们也可以看到这个systemform属于哪个实体,我 ...
- Python实现Mysql数据库连接池
python连接Mysql数据库: python编程中可以使用MySQLdb进行数据库的连接及诸如查询/插入/更新等操作,但是每次连接mysql数据库请求时,都是独立的去请求访问,相当浪费资源,而且访 ...
- python命令行参数解析模块argparse和docopt
http://blog.csdn.net/pipisorry/article/details/53046471 还有其他两个模块实现这一功能,getopt(等同于C语言中的getopt())和弃用的o ...
- JAVA面向对象-----成员内部类访问细节
JAVA面向对象-–成员内部类访问细节 私有的成员内部类不能在其他类中直接创建内部类对象来访问. 如果内部类中包含有静态成员,那么java规定内部类必须声明为静态的访问静态内部类的形式:Outer.I ...
- com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field 异常
分享牛原创(尊重原创 转载对的时候第一行请注明,转载出处来自分享牛http://blog.csdn.net/qq_30739519) 1.1.1. 前言 近期在使用ObjectMapper对象将jso ...
- 插件占坑，四大组件动态注册前奏（三） 系统BroadCast的注册发送流程
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52204143 前言:为什么要了解系统Activity,Service,BroadCas ...