四、Jquery实例-标签页效果
来源:互联网 发布:恋夏500日 知乎 编辑:程序博客网 时间:2024/06/05 15:39
一、tab.htm
<!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>
<title>Jquery实例-标签页效果</title>
<link type="text/css" rel="stylesheet" href="css/tab.css" />
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<ul id="tabfirst">
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentin contentfirst">内容区1</div>
<div class="contentfirst">内容区2</div>
<div class="contentfirst">内容区3</div>
<br />
<br />
<br />
<br />
<ul id="tabsecond">
<li class="tabin">装入完整页面</li>
<li>装入动态部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond">
<img alt="页面装载中" src="images/img-loading.gif" />
<div id="realcontent"></div>
</div>
</body>
</html>
二、tab.css
ul,li
{
margin:0px;
padding:0px;
list-style:none;
}
#tabfirst li
{
float:left;
background-color:#868686;
color:#ffffff;
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:#ffffff;
width:300px;
height:100px;
padding:2px;
display:none; /*首先全部内容区隐藏*/
}
div.contentin
{
display:block; /*显示*/
}
#tabsecond li
{
float:left;
background-color:White;
color:Blue;
padding:5px;
margin-right:2px;
cursor:pointer; /*手形*/
}
#tabsecond .tabin
{
background-color :#f2f6fb;
border:1px solid black;
border-bottom:0px; /*去掉下边框*/
z-index:100; /*值越大越在上面*/
position:relative; /*如果要使z-index起作用,必须要加position:relative;*/
}
#contentsecond
{
width:300px;
padding:10px;
background-color:#f2f6fb;
clear:left;
border:1px solid black;
position:relative; /*相对于原来的位置*/
top:-1px; /*向上移动1个像素*/
}
#contentsecond img
{
display:none;
}
三、tab.js
var timeoutid; //全局变量
$(document).ready(function(){
$("#tabfirst li").each(function(index){
//每个包装li的jquery对象都会执行function代码
//index 是当前执行这个functon代码的li,对应在所有li组成的数组中的索引值
$(this).mouseover(function(){
var liNode=$(this);
timeoutid=setTimeout(function(){
$("#tabfirst li.tabin").removeClass("tabin"); //清除上一次,鼠标移入的li的样式
$("div.contentin").removeClass("contentin");
$(liNode).addClass("tabin");
$("div.contentfirst").eq(index).addClass("contentin"); //当前标签所对应的内容区域
//$("div.contentfirst:eq("+index+")").addClass("contentin");
},300); //内的代码延长300毫秒后运行
}).mouseout(function(){
clearTimeout(timeoutid); //清除延迟
});
});
//在整个页面装入后,#contentsecond装入静态的html内容
$("#realcontent").load("tabload.htm");
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if(index==0)
{
//装入静态完整页面
$("#realcontent").load("tabload.htm");
}else if(index==1){
//装入动态部分页面
$("#realcontent").load("tabload.aspx div"); //将tabload.aspx的div标签显示出来
}else if(index==2)
{
//装入远程数据(这里也是动态页面输出的数据)
$("#realcontent").load("tabdata.aspx");
}
});
});
//对load图片绑定 ajax请求开始和交互结束事件
$("#contentsecond img").bind("ajaxStart",function(){
$("#realcontent").html("");
//整个页面任何ajax交互开始时,function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
$(this).hide();
});
});
- 四、Jquery实例-标签页效果
- 【JQuery实例】--标签页效果
- JQuery学习日志四(标签页效果)
- 实战Jquery(四)--标签页效果
- 传智播客JQuery实战(四):标签页效果
- 【JQuery】标签页效果
- tab jquery 标签页效果
- jquery实战---标签页效果
- jQuery实战4:标签页效果
- JQuery 实例:标签切换
- jQuery效果实例源代码
- jquery实现标签切换效果
- jQuery - 综合实例 - Pre标签在IE与Firefox下效果相对理想的换行处理
- Jquery实现多层元素点击结果叠加效果_获取标签内容_叠加实例
- jquery 标签切换效果,单击选择效果
- JQuery实战第四讲:标签页效果 一
- 用css和jquery实现标签页效果(一)
- css3和jQuery实现一个简单的标签页效果
- Java 类的热替换 —— 概念、设计与实现
- 用Windows Live Writer写CSDN博客
- rtp学习ing
- KMP算法的C语言实现
- 字符串内部分替换的方法
- 四、Jquery实例-标签页效果
- DBMS course :You’ve Got to Find What You Love
- 敏捷开发 故事墙
- KMP算法的C++实现代码
- *** WARNING L15: MULTIPLE CALL TO SEGMENT
- 收集的一些常用技术(.Net)
- matlab自定义伪彩色
- 移植u-boot-2011.03到S3C2440(utu2440)方法与步骤###1. 配置和初步编译
- Android工程导入jar文件步骤