我的tab页面，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 runat="server">
<title></title>
<style type="text/css">
.tabs
{
list-style: none;
padding: 0;
margin: 0px;
border-bottom: 1px solid silver;
width: 619px;
border-top:0px solid silver;
}
.tabs li
{
float: left;
background: #e0e0e0;
border: 1px solid silver;
border-left: none;
margin: 0px;
}
ul.tabs li a
{
text-decoration: none;
padding: 0 20px;
}
a
{
display: block;
color:Black;
}
.active
{
background-color: White;
border-bottom: 1px solid #fff;
}
.tab_container
{
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
height: 500px;
float: left;
clear: both;
width: 841px;
}
a:hover
{
background-color: White;
color:Red;
}
a:visited
{
color: Black;
}
</style>
<script src="Js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li").eq(0).addClass("active");
$(".tab_content").eq(0).show();
$(".tabs li").click(function() {
$(".tabs li").removeClass("active");
$(".tab_content").hide();
$(this).addClass("active");
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn("slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="tabs">
<li><a href="#tab1">Menu1</a></li>
<li><a href="#tab2">Menu2</a></li>
<li><a href="#tab3">Menu3</a></li>
<li><a href="#tab4">Menu4</a></li>
<li><a href="#tab5">Menu5</a></li>
<li><a href="#tab6">Menu6</a></li>
<li><a href="#tab7">Menu7</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Cotent1
</div>
<div id="tab2" class="tab_content">
Cotent2
</div>
<div id="tab3" class="tab_content">
Cotent3
</div>
<div id="tab4" class="tab_content">
Cotent4
</div>
<div id="tab5" class="tab_content">
Cotent5
</div>
<div id="tab6" class="tab_content">
Cotent6
</div>
<div id="tab7" class="tab_content">
Cotent7
</div>
</div>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
.tabs
{
list-style: none;
padding: 0;
margin: 0px;
border-bottom: 1px solid silver;
width: 619px;
border-top:0px solid silver;
}
.tabs li
{
float: left;
background: #e0e0e0;
border: 1px solid silver;
border-left: none;
margin: 0px;
}
ul.tabs li a
{
text-decoration: none;
padding: 0 20px;
}
a
{
display: block;
color:Black;
}
.active
{
background-color: White;
border-bottom: 1px solid #fff;
}
.tab_container
{
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
height: 500px;
float: left;
clear: both;
width: 841px;
}
a:hover
{
background-color: White;
color:Red;
}
a:visited
{
color: Black;
}
</style>
<script src="Js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li").eq(0).addClass("active");
$(".tab_content").eq(0).show();
$(".tabs li").click(function() {
$(".tabs li").removeClass("active");
$(".tab_content").hide();
$(this).addClass("active");
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn("slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="tabs">
<li><a href="#tab1">Menu1</a></li>
<li><a href="#tab2">Menu2</a></li>
<li><a href="#tab3">Menu3</a></li>
<li><a href="#tab4">Menu4</a></li>
<li><a href="#tab5">Menu5</a></li>
<li><a href="#tab6">Menu6</a></li>
<li><a href="#tab7">Menu7</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Cotent1
</div>
<div id="tab2" class="tab_content">
Cotent2
</div>
<div id="tab3" class="tab_content">
Cotent3
</div>
<div id="tab4" class="tab_content">
Cotent4
</div>
<div id="tab5" class="tab_content">
Cotent5
</div>
<div id="tab6" class="tab_content">
Cotent6
</div>
<div id="tab7" class="tab_content">
Cotent7
</div>
</div>
</div>
</form>
</body>
</html>
