JQuery标签页效果
<!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>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
</head>
<body>
<!--css-->
<style type="text/css">
.css_div
{
width: 300px;
height: 200px;
}
.css_div div
{
width: 100%;
height: 100%;
clear: left;
color: White;
padding: 5px;
background-color: #868686;
display: none;
}
.css_div ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.css_div_ul li
{
float: left;
background-color: #868686;
color: #ffffff;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
li.css_tabli_In
{
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.css_tabdiv_In
{
display: block;
background-color: #6E6E6E;
}
</style>
<!--js-->
<script type="text/javascript">
var timeoutid;
$(function() {
$(".css_div_ul > li")
.each(function(index) {
$(this).mouseover(function() {
//保存当前的li
var liNode = $(this);
timeoutid = setTimeout(function() {
//隐藏当前的元素
$("div.css_tabdiv_In").removeClass("css_tabdiv_In");
$("li.css_tabli_In").removeClass("css_tabli_In");
//显示鼠标指向的元素
$(".css_div > div").eq(index).addClass("css_tabdiv_In");
liNode.addClass("css_tabli_In");
}, 300);
}).mouseout(function() {
clearTimeout(timeoutid);
});
}); // .each(function(index)
});
</script>
<div class="css_div">
<ul class="css_div_ul">
<li class="css_tabli_In">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="css_tabdiv_In">
Content 1</div>
<div>
Content 2</div>
<div>
Content 3</div>
</div>
<br /> <br /> <br />
<!--css-->
<style type="text/css">
.css_div2
{
width: 700px;
height: 200px;
}
.css_div2 div
{
width: 100%;
height: 100%;
clear: left;
padding: 5px;
}
.css_div2 ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.css_div_ul2 li
{
float: left;
color: blue;
padding: 5px;
margin-right: 2px;
cursor:pointer;
}
li.css_tabli_In2
{
background-color: #F2F6FB;
border: 1px solid black;
border-bottom:0;
position:relative;
z-index:2;
}
div.css_tabdiv_In2
{
display: block;
background-color: #F2F6FB;
border: 1px solid black;
position:relative;
top:-1px;
}
div.css_tabdiv_In2_content{}
</style>
<!--js-->
<script type="text/javascript">
$(function() {
//装入完整的html页面
$(".css_tabdiv_In2_content").load("装入完整的HTML页面.htm");
$(".css_div_ul2 li").each(function(index) {
//为标签注册鼠标click事件
$(this).click(function() {
//设置css
$(".css_div_ul2 li").removeClass("css_tabli_In2");
$(this).addClass("css_tabli_In2");
if (index == 0) {
//装入完整的html页面
$(".css_tabdiv_In2_content").load("装入完整的HTML页面.htm");
} else if (index = 1) {
//装入动态页面的一部分(此处装入的是h2）
$(".css_tabdiv_In2_content").load("xxx.aspx h2");//如果没有xxx.aspx文件则无法显示
} else if (index == 2) {
//装入远程获取的数据
$(".css_tabdiv_In2_content").load("xxx.aspx"); //如果没有xxx.aspx文件则无法显示
}
});
});
//设置loading文字在请求时显示，完成请求后隐藏
$(".css_tabdiv_In2_skin span").bind("ajaxStart", function() {
//整个页面中任意ajax交互开始前，function中的内容会被执行。
//清空css_tabdiv_In2_content内容后显示loading
$(".css_tabdiv_In2_content").html("");
$(this).show();
}).bind("ajaxStop", function() {
//整个页面中任意ajax交互结束后，function中的内容会被执行。
$(this).hide();
});
});
</script>
<div class="css_div2">
<ul class="css_div_ul2">
<li class="css_tabli_In2">装入完整的html页面</li>
<li>装入动态页面的一部分</li>
<li>装入远程获取的数据</li>
</ul>
<div class="css_tabdiv_In2">
<span style="display:none;">loading...</span>
<div class="css_tabdiv_In2_content">
Content
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery标签页效果</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
</head>
<body>
<!--css-->
<style type="text/css">
.css_div
{
width: 300px;
height: 200px;
}
.css_div div
{
width: 100%;
height: 100%;
clear: left;
color: White;
padding: 5px;
background-color: #868686;
display: none;
}
.css_div ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.css_div_ul li
{
float: left;
background-color: #868686;
color: #ffffff;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
li.css_tabli_In
{
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.css_tabdiv_In
{
display: block;
background-color: #6E6E6E;
}
</style>
<!--js-->
<script type="text/javascript">
var timeoutid;
$(function() {
$(".css_div_ul > li")
.each(function(index) {
$(this).mouseover(function() {
//保存当前的li
var liNode = $(this);
timeoutid = setTimeout(function() {
//隐藏当前的元素
$("div.css_tabdiv_In").removeClass("css_tabdiv_In");
$("li.css_tabli_In").removeClass("css_tabli_In");
//显示鼠标指向的元素
$(".css_div > div").eq(index).addClass("css_tabdiv_In");
liNode.addClass("css_tabli_In");
}, 300);
}).mouseout(function() {
clearTimeout(timeoutid);
});
}); // .each(function(index)
});
</script>
<div class="css_div">
<ul class="css_div_ul">
<li class="css_tabli_In">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="css_tabdiv_In">
Content 1</div>
<div>
Content 2</div>
<div>
Content 3</div>
</div>
<br /> <br /> <br />
<!--css-->
<style type="text/css">
.css_div2
{
width: 700px;
height: 200px;
}
.css_div2 div
{
width: 100%;
height: 100%;
clear: left;
padding: 5px;
}
.css_div2 ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.css_div_ul2 li
{
float: left;
color: blue;
padding: 5px;
margin-right: 2px;
cursor:pointer;
}
li.css_tabli_In2
{
background-color: #F2F6FB;
border: 1px solid black;
border-bottom:0;
position:relative;
z-index:2;
}
div.css_tabdiv_In2
{
display: block;
background-color: #F2F6FB;
border: 1px solid black;
position:relative;
top:-1px;
}
div.css_tabdiv_In2_content{}
</style>
<!--js-->
<script type="text/javascript">
$(function() {
//装入完整的html页面
$(".css_tabdiv_In2_content").load("装入完整的HTML页面.htm");
$(".css_div_ul2 li").each(function(index) {
//为标签注册鼠标click事件
$(this).click(function() {
//设置css
$(".css_div_ul2 li").removeClass("css_tabli_In2");
$(this).addClass("css_tabli_In2");
if (index == 0) {
//装入完整的html页面
$(".css_tabdiv_In2_content").load("装入完整的HTML页面.htm");
} else if (index = 1) {
//装入动态页面的一部分(此处装入的是h2）
$(".css_tabdiv_In2_content").load("xxx.aspx h2");//如果没有xxx.aspx文件则无法显示
} else if (index == 2) {
//装入远程获取的数据
$(".css_tabdiv_In2_content").load("xxx.aspx"); //如果没有xxx.aspx文件则无法显示
}
});
});
//设置loading文字在请求时显示，完成请求后隐藏
$(".css_tabdiv_In2_skin span").bind("ajaxStart", function() {
//整个页面中任意ajax交互开始前，function中的内容会被执行。
//清空css_tabdiv_In2_content内容后显示loading
$(".css_tabdiv_In2_content").html("");
$(this).show();
}).bind("ajaxStop", function() {
//整个页面中任意ajax交互结束后，function中的内容会被执行。
$(this).hide();
});
});
</script>
<div class="css_div2">
<ul class="css_div_ul2">
<li class="css_tabli_In2">装入完整的html页面</li>
<li>装入动态页面的一部分</li>
<li>装入远程获取的数据</li>
</ul>
<div class="css_tabdiv_In2">
<span style="display:none;">loading...</span>
<div class="css_tabdiv_In2_content">
Content
</div>
</div>
</div>
</body>
</html>
